iPhone上的Container DIV不是100％宽度

Question

在iPhone上查看http://benoitfal.com/tess.html并注意我的容器div是错误的......它应该是浏览器宽度的100％。

Answer 1

说你的iPhone就像我的375px宽 - 这是100％。您的图像宽度超过375像素，因此iPhone已缩小显示整个页面。容器仍然是100％（在我的情况下是375px），这就是为什么你的盒子只有大约一半的屏幕。如果您将图像宽度设置为100％而不是实际尺寸，它们将缩小以适合视口。

桌面原创解决方案： 您的框是浏览器宽度的100％，但您已经为每边添加了6px的填充。不幸的是，这增加了宽度，这就是为什么它会溢出。 在div上设置box-sizing: border-box，它将修复它。

有关此box-sizing的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

因为这还不是一个完全接受的CSS，你应该按照链接中的例子使用浏览器前缀。如果您为SASS使用Compass，则可以使用@include box-sizing(border-box)。