在 iPhone 上，页脚不会扩展到 100% 宽度，为啥？
Posted
技术标签:
【中文标题】在 iPhone 上，页脚不会扩展到 100% 宽度，为啥？【英文标题】：Footer will not extend to 100% width on iphone, why?在 iPhone 上，页脚不会扩展到 100% 宽度，为什么？ 【发布时间】：2012-07-11 12:02:53 【问题描述】：我几乎完成了这个网站，但有一个问题。在 iphone（以及可能的其他移动设备）上，页脚在右下角被截断，留下一个空白区域，即使我已将页脚设置为 min-width:100%。我不确定是什么原因造成的，希望能对此提供任何帮助。您可以访问网站here
我已将下面的 html 分解为基本要素。
<body>
<div class="content">
<header>
<img />
</header>
<img />
<h3>Title</h3><br>
<p>
Paragraph
</p>
<div class="push"></div>
</div>
<div id="footer">
<a href="page.html">
<img />
</a>
<ul>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
<li>
<h3>footer title</h3>
<p><a href="page.html">footer Link</a></p>
</li>
</ul>
<p>copyright text<a href="page.html">link</a></p>
</div>
</body>
还有 CSS
body
text-align: center;
padding-top: 40px;
color: #333;
margin: 0px;
width: 100%;
min-width: 980px;
.content
width:1080px;
margin: Auto;
#footer
background-color: #000;
float: left;
height:250px;
min-width:100%;
margin-top:70px;
padding-top:45px;
#footer ul
list-style:none;
padding: 0px;
margin-top:30px;
谢谢！
编辑：
好的，我已按照向网站添加视口元标记的建议进行操作。然而，这让我更加困惑。网站不是按比例显示在屏幕上，而是现在显示的方式过于放大，页脚现在是一个在左下角呜咽的小方块。我已经像这样添加了视口元标记
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
你可以看到这个直播here 我是否以某种方式写错了视口元数据？错误的值？
编辑2： 我还想指出，主体 正在 延伸到视口的整个宽度，您可以在此处看到： http://gloryillustration.com/tests/test9.html 我将身体的背景颜色设置为灰色，所以你可以看到它只是行为不端的页脚！我相信 body 标签和 div 标签在这方面的行为是相同的，但他们不会？
【问题讨论】：
阅读此内容并将其添加到您的网站developer.mozilla.org/en/Mobile/Viewport_meta_tag @SVS 您应该将此评论移至答案。 为什么图片标签中没有所需的属性？ 在移动视图中，您的图片似乎将页面大小扩大到 100% 以上。如果您将图像设置为百分比，使其不会超出您的屏幕，那么应该可以解决您的问题。 对不起，你在说什么图像？是页脚的图片吗？ 【参考方案1】：使用视口元标记使您的网站支持移动浏览器。
这是一个很好的描述：
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/
&这里是github上关于这个的精彩讨论（必读第五条评论）：
https://github.com/h5bp/html5-boilerplate/issues/1099
【讨论】：
hmmmm，似乎给我造成了更多的困惑，请参阅上面的编辑。 @bestfriendsforever 哦！我检查了你的网站 css，没有特定于设备的 css，那么这个元视图的用途是什么。如果你只想在所有浏览器中显示相同的网站布局，那么它就会发生。尝试调整您的浏览器大小并将水平滚动条向右拖动，然后您的页脚也会被剪裁。使用媒体查询使您的网站具有响应性。 感谢 SVS，我认为您的评论是我一直在寻找的答案，这个问题的解决方案比我最初想象的要复杂得多。再次感谢。【参考方案2】：我不确定它在多大程度上是正确的，但是我在我的网站上给出了这个元行并且我解决了这个问题：
<meta name="viewport" content="width=320, initial-scale=0.29">
宽度是 iPhone 的尺寸（水平）。 initial-scale 是实际尺寸（1100px）与iPhone尺寸（320px）的比值
【讨论】：
以上是关于在 iPhone 上，页脚不会扩展到 100% 宽度，为啥？的主要内容，如果未能解决你的问题，请参考以下文章