1

このメディア クエリをターゲット ビューポートの最大幅 800px のデバイス、最小値 400px に使用しています

@media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}

そして、このコードを使用するために横向きの色を変更する必要があります

@media screen and (orientation:landscape)
{
body {background:red;}
}

デバイスではうまく機能しますが、背景の赤はPCブラウザにも適用され、デバイスの横向きのみで背景の赤を適用する方法は?

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

4

3 に答える 3

5

背景を適用する要素を選択していません

@media screen and (orientation:landscape)
{background:red;}

次のようになります。

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){
  body {
    background: red;
  }
}

max-device-width は、デスクトップを無視するようにする必要があります。そこに入れないdeviceと、ブラウザを小さくしたデスクトップに影響を与えます。

于 2013-02-08T12:24:08.463 に答える
2

このようにしてみてください

@media screen and (max-width: 800px) 
              and (min-width: 400px) {
    body {
        background: white;
    }
}

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (orientation:landscape) {
    body {
        background: red;
    }
}

または、 http://jsbin.com/irozuf/1/editmin-resolutionのように値を見てハンドヘルド専用デバイスを検出しようとします-例

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (min-resolution: 97dpi)   /* a typical screen has 96dpi */
              and (orientation:landscape) {
    body {
        background: red;
    }
}

このディスプレイのリストをピクセル密度別に見ると、最新のモバイル デバイスで問題なく動作するようです。

于 2013-02-08T12:26:59.130 に答える
2

これらのメタ タグをページの先頭に追加すると:

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

キー：「幅」は同じ「デバイス幅」を意味します.so、

@media screen and (max-device-width: 1000px){}

に等しい

@media screen and (max-width: 1000px){}

好きなものをそれぞれ使用してください:
[キー「幅」を含むメタタグ]

または

[メタタグなしで「デバイス幅」]

于 2013-06-16T12:46:41.457 に答える