iPhone, iPad, iPod touch の Safari の解像度のまとめ

 WEB サイトをデザインする上で、WEB ページの「高さ」や「幅」は重要な要素です。 特に「幅」については、ページがデバイスの幅を超えてしまうと横方向へのスクロール操作が必要となり、操作性の悪いページになってしまいます。 本稿では Apple 社の iPhone, iPad, iPod touch それぞれの Safari で WEB サイトを表示した際の解像度についてまとめます。 皆様の WEB サイトの制作の参考になれば幸いです。

知っておくべき前提知識

 iPhone や iPad に関するニュースや技術仕様を見た時に「Retina ディスプレイは高解像度である」などと iPhone や iPad のモニタの解像度が周知されますが、では Safari で WEB ページを開くとその通りの解像度で閲覧できるかと言うと、それは違うということに注意が必要です。 HTML の meta の指定などにもよりますが、viewport に width=device-width を指定した場合は、デバイスごとに下記で述べるような解像度での表示となります。 Retina の解像度の 2048px などでの表示にはなりません。

iPhone

 まずは iPhone の Safari の解像度からみてきましょう。 解像度は以下のとおりです。

デバイス高さ
iPhone 4320px480px
iPhone 4s
iPhone 5320px568px
iPhone 5s, 5c
iPhone 6375px667px
iPhone 6+414px736px

iPad

 続いて iPad の Safari の解像度ですが、初代 iPad から現在に至るまで、(幅)768px × (高さ)1024px で変わっていません。

iPod touch

 最後に iPod touch です。 iPhone と解像度は一緒ですね。

デバイス高さ
iPod touch (第4世代)320px480px
iPod touch (第5世代)320px568px

筆者の考察

 ここからは筆者の考察になりますが、スマートフォン, タブレット, PC の3つ向けにレスポンシブルデザインなページを作成する際には、筆者は下記のような幅指定を行って3つのデザインが変化するようにしています。

対象デバイス対象のデバイスの幅min-width の指定
スマートフォン320px ≦ width < 660px320px
タブレット660px ≦ width < 1024px660px
タブレット, PC1024px ≦ width1024px

 タブレットの解像度を 660px からとしているのは特に重大な理由はありませんが、幅が 660px あれば左右に 10px の幅(padding)をもった状態で 640px 幅の画像を表示できるからです。 640px 前後がタブレットの解像度として十分情報を詰め込める最低の幅がこのくらいだろうと思っています。

おわりに

 今後しばらくは、日本では iOS の端末の占める割合は多いでしょうし、そうでなくてもスマートフォン、タブレット、PCという3種類の端末が主流でしょうから、3つの解像度は意識したWEBサイト製作していくことが必要でしょう。

著者 : OSCA

OSCA

 初級WEBエンジニアです。最近は Android, iOS, WEBアプリの作成に力を入れています。 個人として何か一つでも世の中の多くの人に使ってもらえるアプリを作ろうと日々奮闘中です。