宽度100％不适用于iOS

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

尝试：

<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

你可能会错过移动视窗meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这是必要的，以便移动设备例如iOS的页面适当扩展到视口。你可以read about it here或here。

Answer 3

尝试保留初始缩放和最大空白并使用user-scrollable = no。前两个在我们的响应式设计项目中遇到同样的错误。我还没有弄明白为什么。

Answer 4

您div#innerFooter阻止页脚比例适当，调整幅度为100％，并应通过简化您的META NAME视（至少适用于iOS）以下行修复

#innerFooter {width:100%}