Question

我几乎完成了这个网站，但有一个问题。在iphone（可能还有其他移动设备）上，页脚在底部向右短切，留下一个空白区域，即使我将页脚设置为最小宽度：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 我是否以某种方式编写了视口元素错误？错误的价值观？

EDIT2：我还想指出，主体延伸到视口的整个宽度，你可以在这里看到： http://gloryillustration.com/tests/test9.html 我把身体的背景颜色变成了灰色，所以你可以看到它只是一个行为不端的页脚！我相信身体标签和div标签在这方面会表现相同，但他们不这样做？

Answer 1

使用viewport元标记在移动浏览器中支持您的网站。

以下是对此的精彩描述：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag/

＆安培;这是对github的一个很好的讨论（必须阅读第五条评论）：

https://github.com/h5bp/html5-boilerplate/issues/1099

Answer 2

我不确定这是多么正确，但我在我的网站上给了这个元线，我解决了这个问题：

<meta name="viewport" content="width=320, initial-scale=0.29">

宽度是iPhone的尺寸（水平）。初始比例是实际尺寸（1100px）与iPhone尺寸（320px）之间的比率

页脚在iphone上不会延伸到100％宽度，为什么？

2 个答案: