レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました

デバイスの画面サイズは色々あります

レスポンシブWebデザインをする時に「スマートフォン」「タブレット」「PC」と大きく分けて3種類になります。
だからと言って、レスポンシブWebデザインの対応が3種類という訳ではありません。
今みなさんが使っているスマートフォンやタブレットは全部同じじゃないですよね。
iPhone、Android、iPad、iPad miniなどなど。
探してたら、「こんなにあったっけか・・・？」と思うくらいでした。
CMでJCOMさんも10万人にタブレット型テレビらしきものが当たるキャンペーン的な（曖昧ですみません）ものも行っている様ですし、これからもっともっと増えるのかもしれませんね。
という事で、現段階でよく使われているデバイスのサイズをまとめてみました。

各デバイスの画面サイズ

iPhone・ちょっと昔のAndroidの縦は「320px」

iPhoneとちょっと昔のAndroidの縦サイズは320pxでした。
一番小さいのはこのサイズですね。

iPhone・一部のAndroidの横は「480px」

一部のAndroidの横サイズは480pxでした。
「一部の」というのが気になりますね。

一部のAndroidの縦は「540px」

一部のAndroidの縦サイズは540pxでした。
やっぱり「一部の」というのが気になりますね。

Kindleの縦は「600px」

Kindleの縦サイズは600pxでした。
kindle FireもちゃんとWebが見られます。

iPadの縦は「768px」

iPadの縦サイズは768pxでした。
タブレットサイズの基本サイズでした。

一部のAndroidの横は「800px」

一部のAndroidの横サイズは800pxでした。
スマフォは共通にしてほしいですね・・・

iPad・キンドルの横は「1,024px」

iPad・キンドルの横サイズは1,024pxでした。
このサイズだとPCでも同様に使えると思います。

PCサイトは「1,280px」

PCサイズは1,280pxでした。
こちらのサイズは1,024以上と設定すればipad横と同じレイアウトで出来ると思います。

全部のデバイスに対応するのか

では全部のデバイスに対応するべきなのか。
私個人としてはNoです。全対応は大変です。
もちろん細かく設定すればするほど各デバイスで綺麗に見えるので越したことはないのですが、ある程度「ブレークポイント」を定めて作った方が良いかと思います。
画像も各ブレークポイントに合わせて製作し、CSSでwidth:100%;にすると対応も可能です。

最後に

基準を決めていけばそんなに恐る事はないとは言っても、やっぱりデバイスの数が多いなぁと思います。
どこまで対応するか、どのデバイスを主とするか、クライアントときちんと打ち合わせしましょう。
そうしないと「スマートフォン＝全てのスマフォ（iPhone・Android）」「タブレット＝全てのタブレット（ipad・kindle・その他携帯会社が売り出しているタブレットなど）」と思われてしまうかもしれません。
ガラケーもスマフォの影に隠れていますが、大手情報サイトになればまだまだガラケーで情報を得ているユーザーも多いと思います。
今年から2015年あたりでスマフォのシェア率50％程度。まだガラケーユーザーもいるという事です。
そういった事も含めて対応できる様に準備しておきたいですね。