和田憲幸のブログ

iOS端末の場合はmediaの分岐のみで問題ないんですが、Androidさんはいろいろ事情が異なるようで困惑しています。それよりもAndroid端末（アクオスフォン）のユーザエージェントにAndroidって入ってないのには笑ったけどね。OSSだからってそこ削ったら意味わからんだろ。

max-device-widthとdevicePixelRatio

iOS（Safari）の場合、max-device-widthは実機のPixel値をwindow.devicePixelRatioで割ったものが指定されているような気がする。ようは解像度を加味した解像度ということか。なんでこんな面倒な事をAppleはやっているかというと「解像度が高い≠デバイスの画面がデカイ」ではないためだ。ただこれも一概に言えず内包するコンテンツによってやいのやいのしてるっぽい。

転じてAndroid（4.2）は実機そのままの解像度を返す。これはバージョンに依拠していると思うのでなんとも言えないが、高解像度ディスプレイを備えたAndroid端末の場合はそのままのPixelを返す。それがどういう事かと言うと、モバイル端末でも高解像度端末の場合は通常表示になってしまうということだ。ややこしい。

同じWebKitなのだからこのあたりの仕様はさっさと統一してほしいが、2.3 Gingerbread問題などを孕むAndroidへの対応としてはCSS media属性のみでの分岐ではなくJavascriptの力も借りる必要がありそうだ。う～んめんどくさい。

Mobile判定はユーザエージェントにMobileが入ってりゃまぁOKなんですが、ピクセルレシオと画面解像度の比較なんかも実装したほうが、今後のモバイル市場の変動を考えれば安定かもしれませんね。

とりあえずザザッと調べた程度なので間違っているかもしれないのでご注意ください。