Nexus 7 screen.widthは800を返しますが、メディアのクエリmax-width：720pxはまだ適用されています

Question

応答可能なデザインをテストするために使用しているGoogle Nexus 7タブレットがあります。 Javascriptでは、screen.widthは、期待どおり（ネイティブ解像度）、800pxとして返します。

画面の最大幅が> 720pxの場合、次のメディアクエリがタブレットでどのように選択されますか？

@media only screen and (max-width: 720px) and (orientation: portrait) { 
    .test{ background: red;} 
} 

Answer 1

Androidは、Androidエコシステムのさまざまな画面の密度に対応するために、ターゲット密度スケーリングを行います。 Androidブラウザは、画面がMDPI画面であるかのように要素のサイズをエミュレートしようとすると、デフォルトで中程度の画面密度をターゲットにしています。

this website使用して、あなたはこのスケーリングの結果はdevice-widthが601 pxとdevice-height。したがってネクサス7の880 pxであるということであることがわかります、それはあなたのmax-width: 720px宣言に収まると背景が赤く表示されます。

window.screen.widthと.height常に実際の画面サイズを返します。 ビューポートサイズとスクリーンサイズは全く異なる2つのものであることを覚えておく必要があります。

この現象が発生しないようにするには、<meta name="viewport">タグにtarget-densitydpi=device-dpiを追加してください。これにより、Androidのターゲット密度スケーリングが無効になります。device-widthおよびdevice-heightは、デバイスのネイティブ画面解像度を報告します。

Androidのターゲット密度スケーリングの詳細については、Android Developers' Documentationをご覧ください。