宽度 100% 在 iOS 上不起作用
由于某些原因，在 iphone 上，我的页脚不会延伸到屏幕上，即使它的 css 设置为 width: 100%。您可以在此处查看我的页脚问题的示例： http://pixelcakecreative.com/tla2/
我的页脚 css 如下：
#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;}
此问题仅适用于 iOS 设备，因为布局在 PC 浏览器上运行良好。知道如何解决这个问题吗？我已经尝试了我能想到的一切。谢谢！
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/
My css for the footer is as follows:
#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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试将您的元名称视口（至少对于 iOS）简化为以下行：
我知道，属性比通常告诉您的要少，但它适用于我的移动项目。
现在，经过仔细检查，大多数情况下您的网站都位于“中心”下方，然后您就有包装和页脚。
用于包装器和页脚的代码是不同的。包装器有固定的
width:941px;而页脚只有width:100%。包装器内的大多数元素都具有width:100%但这仅在包装器具有width: 941px时才有效。因此，您可以尝试向页脚添加相同的宽度和填充
{width:941px; padding:30px 34px;}或类似的内容或者您将页脚放入类似的包装器中，并使用固定的、填充等，然后让页脚保持
width:100%;Try by simplifying your meta name viewport (at least for iOS) to the following line:
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 haswidth:100%. The majority of the elements inside wrapper havewidth:100%but that only works because wrapper haswidth: 941px.So, you either try adding that same width and padding to footer
{width:941px; padding:30px 34px;}or something along those lines ORYou throw footer inside a similar wrapper with a fixed with, padding, etc and then let let footer keep
width:100%;您可能缺少移动视口元标记
这是必要的，以便 iOS 等移动设备正确缩放页面到视口。您可以在此处阅读或此处。
You are probably missing the mobile viewport meta tag
<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 here or here.
您的
div#innerFooter阻止页脚正确缩放，将宽度调整为 100% 就可以修复它your
div#innerFooteris preventing the footer to scale properly, adjust the width to 100% and that should fix it尝试将初始比例和最大比例留空并使用 user-scrollable=no。前两个在我们的响应式设计项目中犯了同样的错误。我还没弄清楚为什么。
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.