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

老师，我按照您说的把这两个样式去掉后，问题还是存在。不过有同学说是浏览器的关系，其实真机上是OK的，我也没在真机上测试过，不知道是真是假……

我这边去掉padding-left: 0.64rem;就行了，你把去了的代码发上来，我在这边测试下。

代码就在附件里，压缩包就是，另外还有个问题，压缩包里另一个页面，是一张图片，宽度是686px，我用视频里的方式用js设置了viewport，然后用686/@r（@r：50rem），但是出来的效果不对，那个图片特别小，之前问有的同学说viewport和rem只用一个就可以，但是我这边如果把/@r去掉的话，样式就都不对了，麻烦老师能一起看下么？

另外就是我在模拟器下看，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.

 

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

        (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手机时，这样做不就没意义了么？这跟写死了有啥区别呢？

这样理解，页面在iphone5（320px）下很完美展示，如果到了iPhone8，那么屏幕变大了，我们的想法是页面要跟着变大，但是此刻页面已经是320px了，body默认没有设置宽度固也是320px。
所以想到的方法就是让页面放大一定的比例，上面那个scale就是算出来要放大多少的。640px，就需要放大一倍，固scale就等于2.
但是，放大是放大，不会改变body和其它元素的css宽度，我们设置meta的属性，然后浏览器帮我们放大。
就相当于pc端的浏览器我们用Ctrl++放大浏览器，但是那些css样式不还是多少就多少吗？