サイトのデザインをテストしているデバイスが2つあります。 Samsung Galaxy NexusおよびAsus Nexus 7タブレット。メディアクエリでこれらの個々のデバイスをターゲットにする方法を理解するのに本当に苦労しています。 max-width
に使用する値やmax-device-width
に使用する値がわかりません。また、メディアクエリをどのような順序で配置するかわかりません...
によると: http://responsejs.com/labs/dimensions/
document.documentElement.clientWidth = 360
document.documentElement.clientWidth = 598
document.documentElement.clientWidth = 603
document.documentElement.clientWidth = 966
次をターゲットにする必要があります。
テストのために以下を試しましたが、良い結果が得られませんでした...何が間違っているのかわかりません。何が機能して何が機能しないのかを理解しようとする数字をいじってみました...
/* 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; }
}
参考までに、レスポンシブデザインを行う際に個々のデバイスをターゲットにすることはそれほど具体的ではないことを知っていますが、これは主にテストのために行うものであり、この場合は行う必要があります。任意の助けいただければ幸いです。
私はネクサス7を持っており、あなたの暗号化を試してみました。問題は、ブラウザごとに異なるビューポートがあることです。したがって、正しい結果を得るのは複雑です。
@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を作成する時間がありません。
Nexus 7で 結果はこちら を表示できます
具体的にターゲットにするには、以下を使用できます。
@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}
これはネクサス7を取得し、iPhoneをターゲットとするメディアクエリがある場合、それらはそのまま残ります。
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
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
画面サイズにはインチを、密度/スペースにはpxを組み合わせて使用してみてください
これにより、銀河のネクサスとネクサス7の明確なレイアウトを、解像度のための線の束なしで使用できます。
// High end Android device
@media screen and (min-width: 600px) and (max-width: 5in)
{
}
// nexus 7 and ipad mini
@media screen and (min-width: 7in) and (max-width: 9in)
{
}
これに関する記事: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/
次のコードは、Nexus7タブをターゲットにするために機能しました。
/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}
HTMLにメタタグを追加することを忘れないでください。例えば、
<meta name="viewport" content="width=device-width"/>