Question

出于某些原因，在iphone上，我的页脚不会在屏幕上伸展，即使它的css设置为宽度：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浏览器上布局正常。知道如何解决这个问题吗？我已经尝试了我能想到的一切。谢谢！

Answer 1

尝试将元名称视口（至少对于iOS）简化为以下行：

<meta name="viewport" content="width=device-width,initial-scale=1" />

我知道，通常被告知的属性比你通常要少，但它适用于我的移动项目。

现在，经过仔细检查，大多数人如果你的网站位于“中心”，那么你就有了包装和页脚。

用于包装器和页脚的代码是不同的。包装器有一个固定的width:941px;，而页脚只有width:100%。包装器中的大多数元素都有width:100%但这只能起作用，因为包装器有width: 941px。

所以，你要么尝试将相同的宽度和填充添加到页脚{width:941px; padding:30px 34px;}或沿着那些行的东西或

您将页脚放入类似的包装内，并使用固定的填充，填充等，然后让页脚保持width:100%;

Answer 2

您的div#innerFooter阻止了页脚正确缩放，将宽度调整为100％并且应该修复它

#innerFooter {width:100%}

Answer 3

您可能缺少移动视口元标记
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这是必需的，因此iOS等移动设备可以正确地将页面缩放到视口。您可以read about it here或here。

Answer 4

尝试将initial-scale和maximum-scale留空并使用user-scrollable = no。前两个在我们的项目中出现同样的错误，具有响应式设计。我还没弄明白为什么。