在 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% 以上。如果您将图像设置为百分比，使其不会超出您的屏幕，那么应该可以解决您的问题。
对不起，你在说什么图像？是页脚的图片吗？

标签： iphone html css mobile-safari responsive-design

【解决方案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）的比值

【讨论】：