以下の 2 つのメディア クエリを使用して、携帯電話で簡単な Web ページを試してみました (ブラウザーなどに関する仕様は下部を参照)。
@media all and (max-width: 979px) { ... css setting a background color for a certain element
@media all and (min-width: 980px) { ... css setting another background color for the same element
979/980 より上で使用されている値は、実験で見つけたものです。つまり、これらは私のモバイルの値のようです。つまり、これら 2 つの値を増減すると、代わりにもう一方の値が適用されることに気付きます。
ただし、これらの境界値を把握するために実験する必要はないと思います。代わりに、次の JavaScript を使用できるはずだと考えました。
document.write('<br>your resolution is ' + screen.availWidth + ' , ' + screen.availHeight);
上記で検出された JavaScript の幅の値は、メディア クエリで実際に機能する値 (979 ではなく 854) とは 100 ピクセル以上異なります。
それで、私の質問は、「screen.availWidth」が明らかに機能しないことを考慮して（そして「screen.width」も作品）？
私の携帯電話は Sony Ericsson Xperia Arc S で、使用しているオペレーティング システムは Android 4.0.4 です。次の 3 つのブラウザーでこの実験を行いました。 javascript 'navigator.userAgent')
Chrome ブラウザーは、上記の JavaScript でこれらの幅/高さの値を表示します: 480 x 854 または 854 x 480 (縦または横のどちらで保持するかによって異なります) Firefox ブラウザーは、上記の Chrome と同じ幅/高さの値を表示します。Opera ブラウザは、横向きで幅/高さ 854 x 439、縦向きで 480 x 658 を表示します。
ただし、上記のように CSS3 メディア クエリを適用しようとすると、これらすべてのブラウザが 854 ではなく 979 の値を使用しているように見えます。