1

私はこのウェブサイトをほぼ完成させましたが、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;
}

ありがとうございました！

編集：

わかりました。Webサイトにビューポートメタタグを追加するという提案に従いました。しかし、それは私にとってさらに混乱を招きました。Webサイトが画面に拡大縮小されて表示される代わりに、表示方法が拡大されすぎて、フッターが左下隅にある小さな正方形になりました。このようなビューポートメタタグを追加しました

<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

ビューポートメタタグを使用して、モバイルブラウザでWebサイトをサポートします。

これについての素晴らしい説明は次のとおりです。

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

＆ここにgithubでこれについての素晴らしい議論があります（5番目のコメントを読む必要があります）：

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（横）のサイズです。初期スケールは、実際のサイズ（1100px）とiPhoneのサイズ（320px）の比率です。

于 2013-05-19T19:06:56.663 に答える