CSS 宽度 100% 不适用于 iOS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8889261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width 100% not working on iOS
提问by JCHASE11
For some reason on the iphone, my footer doesn't stretch across the screen, even though it's css is set to width: 100%. You can view an example of my footer issue here: http://pixelcakecreative.com/tla2/
出于某种原因，在 iPhone 上，我的页脚不会在屏幕上伸展，即使它的 css 设置为宽度：100%。您可以在此处查看我的页脚问题示例：http: //pixelcakecreative.com/tla2/
My css for the footer is as follows:
我的页脚css如下：
#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;}
This problem ONLY applies to iOS devices, as the layout works fine on PC browsers. Any idea how to fix this? I have tried everything I can think of. Thanks!
此问题仅适用于 iOS 设备，因为布局在 PC 浏览器上运行良好。知道如何解决这个问题吗？我已经尝试了我能想到的一切。谢谢！
回答by Sotkra
Try by simplifying your meta name viewport (at least for iOS) to the following line:
尝试将您的元名称视口（至少对于 iOS）简化为以下行：
<meta name="viewport" content="width=device-width,initial-scale=1" />
Less attributes than you are normally told to have, I know, but it has worked for my mobile projects.
我知道，比通常告诉您的属性要少，但它对我的移动项目有效。
Now, upon closer inspection, the majority if your site is under 'center', and then you have wrapper and footer.
现在，经过仔细检查，如果您的站点位于“中心”下方，则大多数情况下，您有包装器和页脚。
The code used for the wrapper and the footer is different. Wrapper has a fixed width:941px;whereas footer just has width:100%. The majority of the elements inside wrapper have width:100%but that only works because wrapper has width: 941px.
用于包装器和页脚的代码是不同的。Wrapper 有一个固定的width:941px;而页脚只有width:100%. 包装器中的大多数元素都具有，width:100%但这仅适用于包装器具有width: 941px.
So, you either try adding that same width and padding to footer {width:941px; padding:30px 34px;}or something along those lines OR
因此，您要么尝试将相同的宽度和填充添加到页脚{width:941px; padding:30px 34px;}或沿这些线的内容或
You throw footer inside a similar wrapper with a fixed with, padding, etc and then let let footer keep width:100%;
你把页脚扔进一个类似的包装内，带有固定的、填充等，然后让页脚保持 width:100%;
回答by David Nguyen
your div#innerFooteris preventing the footer to scale properly, adjust the width to 100% and that should fix it
您div#innerFooter正在阻止页脚正确缩放，将宽度调整为 100%，这应该可以解决它
#innerFooter {width:100%}
回答by Rob
You are probably missing the mobile viewport meta tag<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
您可能缺少移动视口元标记<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This is needed so mobile devices such as iOS properly scale the page to the viewport. You can read about it hereor here.
回答by Florian Rachor
Try leaving initial-scale and maximum-scale empty and use user-scrollable=no. The first two let to the same error in a project of ours with responsive design. I haven't figured out why yet.
尝试将初始比例和最大比例留空并使用 user-scrollable=no。前两个在我们的响应式设计项目中出现了同样的错误。我还没弄明白为什么。
