1

我几乎完成了这个网站，但有一个问题。在 iphone（以及可能的其他移动设备）上，页脚在右下角被截断，留下一个空白区域，即使我已将页脚设置为 min-width:100%。我不确定是什么原因造成的，希望能对此提供任何帮助。你可以在这里访问网站

我已将下面的 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>

你可以在这里看到这个 我是不是在某种程度上写错了视口元数据？错误的价值观？

Edit2：我还想指出，主体延伸到视口的整个宽度，你可以在这里看到：http: //gloryillustration.com/tests/test9.html 我在哪里制作了背景颜色身体灰色，所以你可以看到它只是行为不端的页脚！我相信 body 标签和 div 标签在这方面的行为是相同的，但他们没有？

4

2 回答 2

5

使用视口元标记使您的网站支持移动浏览器。

这是一个很好的描述：

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

& 这里是 github 上关于这个的一个很好的讨论（必须阅读第五条评论）：

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

于 2012-07-11T19:36:44.560 回答
0

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

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

宽度是 iPhone 的尺寸（水平）。initial-scale 是实际尺寸（1100px）与 iPhone 尺寸（320px）之间的比例

于 2013-05-19T19:06:56.663 回答