タブレットの最小解像度と最大解像度のメディアクエリ

Question

現在、レスポンシブデザインWebサイトで作業しています。私は幅と画面の解像度に基づいて異なるデバイスをターゲットにメディア照会を使用します。

1. 私は、画面の解像度を使用してデバイスをターゲットにしたいと思っていましたが、これはどのように動作するのか分かりません。

2. 画面の解像度が97dpiからipadの最大解像度264dpiの範囲であることもあり、最小幅と最大幅の両方をチェックしたかったのです。しかし、これは動作していないようです。もし私が単一の解像度min-widthを与えるならば、HPローディングタブレットのために155dpiが動作します。しかし、最小から最大の解像度条件は機能していないようです。あなたは皆さんのアイデアを共有できますか？

はこのために私はあなたの代わりに device-pixel-ratioを使用してより多くの成功を有していてもよく、以下のコード

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

resolutionメディアクエリーdoesn't have good support in webkit browsers yetのように使用しています。

http://bjango.com/articles/min-device-pixel-ratio/

だから我々はすべてのもののWebKitの（クローム、サファリ、iOSとAndroidの）のためにそれを理解してこれらのブラウザ（Firefoxの、IE9 +、オペラ座）のためresolution、およびdevice-pixel-ratioを使用して、メディアクエリを言い換えることができます。

Windows8.1シミュレータでプリセットの設定を処理します

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px), 
     only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {} 

Answer 2

これらMQS：

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768), 
    screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768), 
    screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080), 
    screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: red !important; 
    } 
} 

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) { 
    body { 
    background-color: violet !important; 
    } 
} 

@media screen and (max-resolution: 174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: purple !important; 
    } 
} 

Answer 3

のAc私の携帯電話が37em以上を持っているのでしかし

@media screen and (min-width: 37em) { 
} 

http://quirksmode.org/tablets.html

Quircksmode により、古い測定にcording、これは、私が推測する新しいタブレット用最適に動作しません。

何について：

は

@media screen and (min-width: 42em) { 
}