14

サイトの設計をテストしている2つのデバイスがあります。サムスンギャラクシーネクサスとAsusネクサス7タブレット。メディアクエリを使用してこれらの個々のデバイスをターゲットにする方法を理解するのに非常に苦労しています。max-width使用する値や使用する値がわかりませんmax-device-width。また、メディアクエリをどのような順序で配置するのかわかりません...

によると： http： //responsejs.com/labs/dimensions/

  • ギャラクシーネクサスポートレート：document.documentElement.clientWidth = 360
  • ギャラクシーネクサスランドスケープ：document.documentElement.clientWidth = 598
  • Nexus 7ポートレート：document.documentElement.clientWidth = 603
  • Nexus 7ランドスケープ：document.documentElement.clientWidth = 966

私は以下をターゲットにする必要があります：

  • ギャラクシーネクサスポートレートとタブレット
  • ギャラクシーネクサスポートレート
  • ギャラクシーネクサスタブレット
  • Nexus7のポートレートとタブレット
  • Nexus7ポートレート
  • Nexus7タブレット

テストのために次のことを試しましたが、良い結果は得られませんでした...何が間違っているのかわかりません。何がうまくいき、何がうまくいかなかったのかを理解しようとして、数字をいじってみました...

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    ul.top-menu { background: red; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    ul.top-menu { background: blue; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    ul.top-menu { background: purple; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

ちなみに、レスポンシブデザインを行うときに個々のデバイスをターゲットにして、それほど具体的にする必要はないことはわかっていますが、これは主にテストとして行っており、この場合は行う必要があります。どんな助けでもいただければ幸いです。

4

7 に答える 7

8

私はNexus7を持っており、あなたのスリックを試しました。問題は、ブラウザごとに異なるビューポートがあることです。したがって、正しい結果を得るのは複雑です。

@media only screen and (device-width : 800px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - firefox";
    }
}
@media only screen and (width : 603px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - chrome";
    }
}
@media only screen and (device-width : 1280px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - firefox";
    }
}
@media only screen and (width : 966px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - chrome";
    }
}

Operaを作る時間がありません。

Nexus7で結果をここで確認できます

于 2012-09-26T07:24:14.843 に答える
2

具体的にターゲットにするには、次を使用できます。

@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}

これにより nexus 7 が取得され、メディア クエリをターゲットとする iPhone がある場合、それらはそのまま残ります。

于 2013-03-07T14:33:53.663 に答える
1

ネクサス 7 (v1) 2012

Mozilla/5.0 (Linux; Android 4.4.3; Nexus 7 Build/KTU84L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Safari/537.36

@media screen
resolution: 192dpi/2dppx
color: 8
-webkit-device-pixel-ratio: 2

orientation: portrait
  width: 600px/37.5em/158mm
  height: 791px/49.4375em/209mm
  device-width: 600px/37.5em/158mm
  device-height: 960px/60em/254mm
  aspect-ratio: 600/791
  device-aspect-ratio: 5/8 or 758/1000
orientation:landscape
  width: 960px/60em/254mm
  height:431px/26.9375em/114mm
  device-width:960px/60em/254mm
  device-height:600px/37.5em/158mm
  aspect-ratio:960/431
  device-aspect-ratio:8/5 or 2227/1000

ネクサス 7 (v2) 2013

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Sfari/537.36

@media screen
resolution: 127dpi/1dppx
color: 8
-webkit-device-pixel-ratio: 1.3312500715255737 or 1.3

orientation: portrait
  width: 601px/37.5625em/159mm
  height: 881px/55.0625em/207mm
  device-width: 601px/37.5625em/159mm
  device-height: 962px/60.125em/254mm
  aspect-ratio: 601/881
  device-aspect-ratio: 601/962
orientation: landscape
  width: 962px/60.125em/254mm
  height: 529px/33.0625em/114mm
  device-width: 962px/60.125em/254mm
  device-height: 601px/37.5625em/159mm
  aspect-ratio: 962/529
  device-aspect-ratio: 962/601 or 2221/1000
于 2015-07-30T18:59:52.243 に答える
0

次のコードは、Nexus7タブをターゲットにするのに役立ちました。

/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}

html に meta タグを追加することを忘れないでください。例えば、

<meta name="viewport" content="width=device-width"/>
于 2014-08-27T07:48:44.147 に答える
-2

Nexus 7 の Chrome で機能したメディア クエリは次のとおりです。

@media only screen and (width : 600px) and (orientation: portrait) {

}


@media only screen and (width : 961px) and (orientation: landscape) {

}
于 2013-02-01T11:53:43.923 に答える
-3

and 式を使用して、同じメディアクエリに複数のルールを使用できます

@media screen and (min-width: 998px) and (max-width: 999px)

998px から 999px の間のいずれかをターゲットにします

于 2012-09-24T00:23:45.417 に答える