スペースモラトリアムノカミサマ

日記+コメント付きブックマーク+他人にも役に立つかもしれない情報など。
(更新情報: RSS(ツッコミ付き) / RSS(ツッコミ抜き) / LIRS)

最近の TrackBack:
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|06|07|08|09|10|
2011|01|02|03|07|10|11|
2012|02|03|04|07|08|09|
2013|01|06|07|
2014|02|08|09|11|
2015|09|
2016|01|05|
2017|07|
2018|05|07|
2019|07|
2020|08|09|10|12|
2021|05|
2022|03|

2010/08/30

_ [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) を活用すべきだ。