页面宽度

[happypeter]

有朋友来信给了这两行代码

body{min-width:990px;}
.container{overflow:hidden;}

我在 iphone 下看网站，确实跟信中切图类似，就是有白边。

[billie66]

放大页面直到出现横向滚动条，背景色消失，右边出现白边，之前就遇到过这个问题。

参考github的解决方案, 在使用背景色的区域限制一下最小宽度

.header, .banner {
  min-width: 1100px;
}

[billie66]

我先按照 github 的方法修改了代码，在大屏幕上不会出现白边，但在手机上白色背景部分的内容不居中

[billie66]

body{min-width:990px;}
.container{overflow:hidden;}

上面的代码部署之后，手机显示页面没有白边了，内容也居中

[billie66]

遇到一个问题，若这样设置

.container{overflow: hidden;}

微信和支付宝的二维码都不能显示

[billie66]

http://stackoverflow.com/questions/3550795/is-it-possible-to-have-a-popup-div-that-breaks-out-of-an-overflowscroll-or-ov

https://css-tricks.com/popping-hidden-overflow/

[happypeter]

明白了。就是如果 .container 是固定的 960px，里面包含的 div 的宽度是 100% ，那么当显示区域小于 960px 的时候，那么 .container 依然是 960px 所以就会出现下面的滚动条，而里面的子 div 还是跟显示区域一样的宽度，这样滚动水平滚动条，就会有白边。

解决方式: https://github.com/happypeter/haoduoshipin/issues/320#issue-66886140

或者把 .container 改写为 { max-width: 960px } 也可以，不过这样，里面的 .div 也都要设置固定的宽度。

[happypeter]

http://pan.baidu.com/s/1c0o6daC

[billie66]

这个问题，与 viewport 有关

http://www.quirksmode.org/mobile/viewports.html