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

携帯電話 (Nokia, Sonye Eicsson, iPhone) やMac、写真、吉田カバン、スマートフォンサイト制作 (HTML5, CSS3) などについてのブログ iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。 iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。 しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript（DOM？）に「window.devicePixelRatio」と

[quao]

via Bouze

[paella]

window.devicePixelRatioが、RetinaDisplayとそうでないので返す値が違うとのこと。ふむふむ。まずは見分け方。

[s5-style]

MediaQueryでiPhone 3G/3GSと4CSSを切り替える

[inurota]

MediaQueryで切り替える方法。メモメモ。

[raimon49]

-webkit-device-pixel-ratio: 2