スマートフォンの標準的な画面サイズ

CSSフレームワークは、とりあえず、Twitter Bootstrapを使うことにした。
Yahoo! Pureは、レスポンシブデザインで、自分の思った通りの挙動をしなかったので、今回は却下。

さて、ターゲットとなるスマホの画面サイズは、どれぐらいの解像度を想定すれば良いのか？




●メルクマール
標準的なスマホとして、以下の3機種に着目してみる。
・Apple iPhone
・SONY Xperia
・Samsung GALAXY

iPhoneは、言わずもがな、外せないだろう。
Androidに関しては、NTTドコモが「ツートップ戦略」を発表していたので、上記2機種と。
ツートップ戦略とネットワーク強化で反撃なるか？……ドコモ夏モデル発表 | RBB TODAY

■主力2機種で勝負！「ツートップ」戦略
　新商品ではまず、夏モデル11機種について説明。加藤社長はこの中でも特に「GALAXY S4 SC-04E」「Xperia A（エース） SO-04E」の2機種について、「この夏自信をもってお薦めする、ドコモの顔ともいえる2機種」、「2013夏モデルのツートップだ」と強調し、重点的にアピールしていくと宣言した。

自分的には、SONYだけでも良い。


●解像度一覧
スマートフォン比較表
http://www.smph.info/

・2013年7月時点での、スマホ解像度
スマートフォン比較表 - メーカー：アップル

iPhone 5
発売日 2012/09/21
解像度 640×1136

スマートフォン比較表 - メーカー：ソニーモバイル

Xperia UL (SOL22)
発売日 2013/05/25
解像度 1080×1920

Xperia A (SO-04E)
発売日 2013/05/17
解像度 720×1280

スマートフォン比較表 - メーカー：サムスン

GALAXY S4 (SC-04E)
発売日 2013/05/23
解像度 1080×1920

画面の解像度は、640、720、1080ピクセルという感じで刻まれている。
iPhoneの横幅640ピクセルを想定したレイアウトで、レスポンシブデザインのWebサイトを作ればOK。


●画面のリサイズ
スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法:浜村拓夫の世界

resizeMyBrowser
http://resizemybrowser.com/