1

この問題は、このサイトhttp://www.sierraisadesigner.com、私のポートフォリオ サイトにあります。

メディア クエリは Firefox では問題なく動作しますが、他のブラウザーや私が試したモバイル デバイスでは動作しません。私は iPad の第 1 世代、iPod、Kindle Fire (これも第 1 世代) を試しました。

私が持っているコードは、かなり広い範囲の画面サイズをターゲットにしています:

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#ccc;}

    #content-bg { padding:20px 0px 0px 0px; }

    .width-200 { width:25%; }
    .width-550 {width:65%; }

    #footer { padding:15px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:550px) and(max-width:699px) {
    .wrapper-900 { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 10px 10px 10px; }

    .width-200 { width:25%; }
    .width-550 { width:65%; }

    TEXTAREA { width:90%; height:200px; }
    INPUT[type=text] { width:90%; }

    #footer { padding:10px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:430px) and (max-width:549px) {
    .wrapper-900 { width:100%; }

    HEADER LI { background:#CCEFFF; padding:10px 15px 10px 15px; }
    #header-nav { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px; }
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:30%; }
} 

@media only screen and (min-width:320px) and (max-width:429px) {
    .wrapper-900 { width:100%; }

    .header-swirl { visibility:hidden; font-size:0.1em; }
    .header-name { font-size:1.8em; }

    HEADER LI { background:#CCEFFF; padding:7px; }
    HEADER UL { padding:0px; width:100%; }
    #header-nav { margin:10px 0px 10px 0px; }

    .slider-img img { width:150%; float:left; margin-left:-50%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px;}
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:90%; }
}

また、max-width (または min-width) の代わりに max-device-width を使用してみました。iPad では動作しますが、Firefox では応答せず、Chrome では非常に奇妙な動作をします。ヘルプ！私は何が欠けていますか??

4

1 に答える 1

6

ビューポート メタ タグがありません:

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

これは、このビューポート全体の取引がどのように機能するかについての (かなり長い) 役立つ説明です。

于 2012-10-11T16:29:19.763 に答える