2

これに関するいくつかの投稿を見てきましたが、頭で使用した問題には役立たないようですが<meta name="viewport" content="width=device-width,initial-scale=1" />、ビューポートの幅にまたがらないヘッダーとフッターの問題は解決しません。ただし、メインコンテンツエリアは機能しているようです。

参照するサイトはbrendanfenn.comです

cssは以下の通りです。どんな洞察も大歓迎です。

#wrapper {
    margin: 0 auto;
    position: relative;
}


#header_container{
    background-image: url(http://www.brendanfenn.com/wp-content/uploads/2013/02/headerBG1.jpg);
    width: 100%;    
}

#header {
    width:964px;
    height:150px;
    margin: 0 auto;
}

#content {
    width:964px;
    background: url(images/border-bg.gif) repeat-y top left;
    z-index: 1;
    margin: 0 auto;

}

#content #left-col {
    width:615px;
    float:left;
    padding: 20px 11px 20px 10px;
    z-index: 1;
}

#content #right-col {
    width:307px;    
    padding:3px;
    float:left;
    z-index: 1;
}


#footer {
    width:100%;
    background: #2a2006;    
    margin: 30px 0 auto;
}
4

2 に答える 2

0 
<meta name="viewport" content="width=device-width,initial-scale=0.4">

（リンクされたファイルから）あなたの問題です。これは、ビューポートを 800px 幅 (デバイス幅 * 1/0.4) に設定しています。

'width:100%' は、ビューポートの 100% の幅、つまり 800px を指しているため、すべてが正常に機能しています。

于 2013-02-19T21:06:13.047 に答える
0

body 要素の幅と高さの値を設定してみてください

body { width: 100%; min-height: 100% }

この問題に対処するのに役立つ可能性がある別のオプションは、@media タイプを使用することです。これを使用して、デバイスがランドスケープ モードの場合に css 値を指定できます。

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   body { //values here }
}
于 2013-02-19T17:01:55.873 に答える