Android 4.0 (ICS) の device-width メディアクエリ

同一のHTMLソースで、デバイスの種類によって表示を変化させる「レスポンシブWebデザイン」に、CSSメディアクエリの「device-width（min-device-width/max-device-width）」を使っているケースが少なくないと思いますが、Android 4.0（ICS）では想定とは違う表示になるかもしれません。

Android 2.3系のスマートフォンやiPhoneでは、viewportを「width=device-width」に指定した場合、CSSメディアクエリの「width」と「device-width」の値は等しかったのですが、Android 4.0ではそれとは異なり、「device-width」の値は常にディスプレイ幅のピクセル数になるようです。

一方、「width」の値は、基本的に従来のAndroid 2.3系と同様に、「ディスプレイ幅÷devicePixelRatio」となります。ただし、Galaxy Nexusでは、画面を横向きにした場合、画面の右端にナビゲーションボタンが表示されるので、その領域分、幅が狭くなっています。

viewportを「width=device-width」に指定した場合

	Galaxy Nexus Android 4.0.2		Xperia ray Android 2.3.4		iPhone 4S iOS 5.1
	縦向き	横向き	縦向き	横向き	縦向き	横向き
width	360px	598px	320px	569px	320px	320px
device-width	720px	1280px	320px	569px	320px	320px

viewportを未指定の場合

	Galaxy Nexus Android 4.0.2		Xperia ray Android 2.3.4		iPhone 4S iOS 5.1
	縦向き	横向き	縦向き	横向き	縦向き	横向き
width	980px	980px	800px	854px	980px	980px
device-width	720px	1280px	800px	854px	320px	320px

サンプル

たとえば「@media (max-device-width:480px)」（デバイス幅480px以下の場合に適用）というようなメディアクエリを使って、スマートフォン向けのスタイルシートを指定している場合、Galaxy Nexusで縦向き表示すると「device-width」が「720px」になるので、スマートフォン向けのスタイルシートは適用されません。そもそも、この指定では、Xperia rayを横向きにした場合でも適用されません。

ここで、Galaxy Nexusにもスマートフォン向けスタイルシートを適用させるために「max-device-width:1280px」としてしまうと、多くのPCのブラウザでもスマートフォン向け表示になってしまいます。

というわけで、Android 4.0では、「device-width」でスマートフォンを識別するのは難しくなります。「device-width」と「-webkit-device-pixel-ratio」を組み合わせる方法もありますが、これでは複雑になるので、「width」を使った方が簡単で良さそうです。

手元に実機がないので試せていませんが、ディスプレイサイズが「720×1280（2x）」や「540×960（1.5x）」の機体で、横向きにしたときにナビゲーションボタンが画面の横に表示されない場合は、「width」の値が「640px」になると思うので、「max-width:640px」で指定するのがいいのかもしれません。

この場合、PCのブラウザでも、ウィンドウ幅を640px以下にすると、スマートフォン向けのスタイルシートが適用されてしまいますが、これはレアケースではないでしょうか。

関連記事

• iPhone 4 の CSS を切り替える方法