6

私はしばらく前にこのウェブサイトを完成させましたが、何かが起こったので、バックアップが正しく行われなかったので、今では一日中それを修正して最初から取り戻すことに費やしました。他の多くのウェブサイトで問題なくこのテクニックを実行したので、それが何をしているのかよくわかりません。おそらく、このウェブサイトを長く見すぎたのでしょうか。

こちらがウェブサイトです。左側と右側にスペースを入れたいのですが、画面の100％に濃い灰色のバーが必要で、どこにいても常にバナーの下にあるため、コンテナは1つだけではありません。したがって、スペースが必要な4つの「含む」divがあります。soem CSS3メディアクエリを配置しましたが、今は右側にギャップがあります。バックグラウンドメイジがずっと進んでいるからだと思っていたのですが、100％に設定されていたので、何が起こっているのかわかりません。それはちょっと単純です、私は今それを見ていません。

これは私がメディアクエリのために持っているものです

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; }

}

これは私のiPhoneでどのように見えるかです

ここに画像の説明を入力してください

どんなアドバイスも役に立ち、ありがたいです。

4

3 に答える 3

3

viewportメタタグを調べます。ページにコードを追加する場合<head>：

<meta name="viewport" content="width=1100">

これにより、iPhoneのビューポートの幅が1100ピクセルになります。iPhoneのデフォルトのビューポートは980pxであるため、ページは100％の幅が980pxであり、実際のコンテンツの幅ではないことを示していました。

ビューポートは注意が必要な場合があります。詳細は次のとおりです。

レスポンシブデザインのビューポートメタタグ

于 2012-12-13T00:57:22.617 に答える
0

ライブサイトを確認しましたが、問題は右側の3ピクセルの余分なスペースにあるようです。また、ナビゲーションメニューの改行にも気づきました。スマートフォンのメディアクエリを次のように変更すると、最後の問題が解決するようです。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; }
#banner { padding: 0; }
#header-right { width: auto; }
#access .menu-header { width: auto; }

h4 { font-size: 1.4em; line-height: 1em; }
}
于 2012-12-13T02:07:17.040 に答える
0

これはどう：

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; }
#header, #content, #stuff, #etc { margin:0;padding:0; }
#inside stuff { whatever else; }

#wrapper一番外側を包みますDIV（直後<body>と前に閉じます</body>）。

あなたの計画が2emのパディング領域の外にいくつかの要素を配置することでない限り、なぜこれがあなたの問題に対するより効率的な解決策ではないのか想像できません。

于 2012-12-13T23:01:55.037 に答える