发新贴  快速回复

移动端布局问题

  KevinBlack
2018-10-16 15:58

老师,我跟着视频做练习,然后自己写了个页面,可是为什么左侧总有一像素白边呢?margin和padding都清0了,不知道是哪里出了问题!求指点!!

附件下载:
 

本帖内容针对以下视频发布:

3-弹性盒模型(三)
 
2017年2月8日

还是padding影响的,不过是下面这个class的padding

.menu_container {
  1. padding-left0.64rem;
  2. box-sizingborder-box;
2018-10-16 17:10  回复本帖
 
KevinBlack

2017年2月8日 2018-10-16 17:10发表的内容:

还是padding影响的,不过是下面这个class的padding

.menu_container {
  1. padding-left0.64rem;
  2. box-sizingborder-box;
老师,我按照您说的把这两个样式去掉后,问题还是存在。不过有同学说是浏览器的关系,其实真机上是OK的,我也没在真机上测试过,不知道是真是假……
2018-10-17 00:28  回复本帖
 
2017年2月8日

KevinBlack 2018-10-17 00:28发表的内容:

老师,我按照您说的把这两个样式去掉后,问题还是存在。不过有同学说是浏览器的关系,其实真机上是OK的,我也没在真机上测试过,不知道是真是假……
我这边去掉padding-left: 0.64rem;就行了,你把去了的代码发上来,我在这边测试下。
2018-10-17 08:18  回复本帖
 
KevinBlack

2017年2月8日 2018-10-17 08:18发表的内容:

我这边去掉padding-left: 0.64rem;就行了,你把去了的代码发上来,我在这边测试下。
代码就在附件里,压缩包就是,另外还有个问题,压缩包里另一个页面,是一张图片,宽度是686px,我用视频里的方式用js设置了viewport,然后用686/@r(@r:50rem),但是出来的效果不对,那个图片特别小,之前问有的同学说viewport和rem只用一个就可以,但是我这边如果把/@r去掉的话,样式就都不对了,麻烦老师能一起看下么?
2018-10-17 10:11  回复本帖
 
KevinBlack

2017年2月8日 2018-10-17 08:18发表的内容:

我这边去掉padding-left: 0.64rem;就行了,你把去了的代码发上来,我在这边测试下。
另外就是我在模拟器下看,body始终比模拟器的宽度窄,这是为啥呢?
2018-10-17 10:14  回复本帖
 
2017年2月8日

KevinBlack 2018-10-17 10:14发表的内容:

另外就是我在模拟器下看,body始终比模拟器的宽度窄,这是为啥呢?

那个1px应该是浏览器模拟手机自身的问题,我这边看是不会的,而且body还是正确的宽度,看下面我自己电脑的截图。


        (function(){
            var w = window.screen.width;
            var targetW = 320;
            var scale = w/targetW;
            var meta = document.createElement("meta");
            meta.name = "viewport";
            meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
            document.head.appendChild(meta);
        })();
    
targetW =320,跟这个有关,假设在640px下,这个scale算出来等于2,那么页面就放大一倍了。所以body还是320px。320放大一倍就是640.

 

2018-10-17 11:03  回复本帖
 
2017年2月8日

没有1px空白,body的宽度也是320px,很对,我想你那个,应该是浏览器自身的问题,这没法改的,真机不会就行了。

2018-10-17 11:04  回复本帖
 
KevinBlack

2017年2月8日 2018-10-17 11:03发表的内容:

那个1px应该是浏览器模拟手机自身的问题,我这边看是不会的,而且body还是正确的宽度,看下面我自己电脑的截图。


        (function(){
            var w = window.screen.width;
            var targetW = 320;
            var scale = w/targetW;
            var meta = document.createElement("meta");
            meta.name = "viewport";
            meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
            document.head.appendChild(meta);
        })();
    
targetW =320,跟这个有关,假设在640px下,这个scale算出来等于2,那么页面就放大一倍了。所以body还是320px。320放大一倍就是640.

 

那如果到了iPhone6或者其他的不是320px手机时,这样做不就没意义了么?这跟写死了有啥区别呢?
2018-10-17 15:25  回复本帖
 
2017年2月8日

KevinBlack 2018-10-17 15:25发表的内容:

那如果到了iPhone6或者其他的不是320px手机时,这样做不就没意义了么?这跟写死了有啥区别呢?
这样理解,页面在iphone5(320px)下很完美展示,如果到了iPhone8,那么屏幕变大了,我们的想法是页面要跟着变大,但是此刻页面已经是320px了,body默认没有设置宽度固也是320px。
所以想到的方法就是让页面放大一定的比例,上面那个scale就是算出来要放大多少的。640px,就需要放大一倍,固scale就等于2.
但是,放大是放大,不会改变body和其它元素的css宽度,我们设置meta的属性,然后浏览器帮我们放大。
就相当于pc端的浏览器我们用Ctrl++放大浏览器,但是那些css样式不还是多少就多少吗?
2018-10-17 15:51  回复本帖
登录 后才可以发表回复