2013.07.19

レスポンシブ・ウェブデザイン時の画面サイズ

こんにちは。エージーワークス代表の増本です。

レスポンシブ・ウェブデザイン（いや、それ以外のウェブサイト制作時もそうですが）時には各色んな端末で、検証を重ねて行きます。

私がiPhoneを使っているからと言って、皆がiPhoneという訳でも当然ないですし（笑）

どのサイズで検証すればよいか？

最近、本当にスマートデバイスと呼ばれる端末、種類が増えて、もちろんそれによって画面サイズも増えています。

レスポンシブ・ウェブデザイン時にはデザインをいくつかのブレイクポイント毎に最適化する事もあるので、どのスマートデバイスのどのサイズがボリュームゾーンか、把握しておく必要があります。

主なサイズ感は以下のとおり。

スマートフォン
iPhone5 640×1136（320×568）
iPhone4（s） 640×960（320×480）
xperia z 1080×1920
Galaxy S III 720×1280

7インチタブレット
iPad mini 1024×768
Nexus7 1280×800
Kindle Fire 1024×600
galaxy tab 1280×800

10インチタブレット
iPad 2048×1536（1024768）
iPad2 1280×800
Xperia tablet s 1024×600
Surface RT 1366×768

等々…

シェアはAndroidが多いと聞きますが、私たちで管理しているいくつかのサイトのアクセスログを見る限り、やはりiPhone、iPadが圧倒的に多い印象です。

もちろんサイトのユーザー層にもよるとは思いますが、そういった事も考慮しつつ、最適化考えて行きたいですね。

スマートデバイスの主なサイズを画像にまとめてみました。
ご参考まで。

レスポンシブ・ウェブデザイン用スマートデバイス主なサイズまとめ

WEBスマホ
AgWORKS Limited

投稿者：AgWORKS Limited

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

TOPへ