_ [Web制作][iPhone] iPhone 4 (Retina) での device-width は320

<meta name="viewport" content="width=device-width"> は、iPhone 3G/3GS 上では width=320 と同義になる。

では、解像度2倍の Retina な iPhone 4 ではどうなるのだろう? ピクセル数に合わせて width=640 扱いになるのか? それとも既存コンテンツの互換性を重視して width=320 扱いとなるのだろうか?

ということで実機で確認してみたところ、iPhone 4 における device-width は320相当だった。同様に device-height も480相当だった。

物理サイズは 3G/3GS と同じで解像度だけが高くなる格好。「device-width で viewport 指定したら iPhone 4 では半分のサイズで表示されちゃうんじゃね?」という不安は払拭された。これで安心して使用できる。(ていうかもうそれ device-width とは言えないような…)

なお、iPad では device-width→768、device-height→1024 相当だった。

iPhone 向けに width=320 指定したページを iPad で表示させると酷く大きい表示になってしまうので、iPad も意識したページ作りをするなら device-width(height) を活用すべきだ。