简体繁体 English

iPhone上的容器DIV宽度不是100％

[英]Container DIV on iPhone isn't 100% width

原文 2014-11-20 04:10:18 2 1 html/ css/ mobile/ width/ containers

看看iPhone上的http://benoitfal.com/tess.html ，注意我的容器div是怎么错的……它应该是浏览器宽度的100％。

1 个解决方案

Say your iPhone is like mine 375px wide - this is 100%. 假设您的iPhone像我的375像素宽-这是100％。 Your images are wider than 375px, so the iPhone has zoomed out to show the whole page. 您的图片宽于375像素，因此iPhone缩小了以显示整个页面。 The container is still 100% (in my case 375px), which is why your box is only about half of the screen. 容器仍为100％（在我的情况下为375px），这就是为什么您的框仅占屏幕一半的原因。 If you make your image widths 100% instead of their actual size, they will shrink to fit the viewport. 如果您将图像宽度设为实际宽度的100％，而不是实际大小，则会缩小以适合视口。

Original solution for desktop: Your box is 100% width of the browser but you've added padding of 6px to each side. 适用于台式机的原始解决方案：您的浏览器框的宽度为100％，但是在每侧添加了6px的填充。 Unfortunately this gets added to the width which is why it's overflowing. 不幸的是，这增加了宽度，这就是为什么它溢出的原因。 Set box-sizing: border-box on the div and it will fix it. 在div上设置box-sizing: border-box ，它将对其进行修复。

More about box-sizing here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 有关box-sizing更多信息，请访问： https : //developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Because this isn't a fully accepted bit of CSS yet, you should use browser prefixes as per the example in the link. 由于尚未完全接受CSS，因此您应按照链接中的示例使用浏览器前缀。 If you're using Compass for your SASS, you could use @include box-sizing(border-box) . 如果您将Compass用于SASS，则可以使用@include box-sizing(border-box) 。