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

投稿者 : OSCA

[PR] "東野・岡村の旅猿"で登場したロケ地を紹介するファンサイト「あの場所へ行こう!」はこちら。

 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 6s
iPhone 7
iPhone 6414px736px
iPhone 6s Plus
iPhone 7 Plus

iPad

 続いて iPad の Safari の解像度です。

デバイスサイズ
iPad, iPad mini, iPad Air768px × 1,024px
iPad Pro1,024px x 1,366px

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サイト製作していくことが必要でしょう。

Miscのトップへ戻る

著者 : OSCA

OSCA

Java, PHP 系のWEBエンジニア。 WEBエンジニア向けコミュニティ「WEBエンジニア勉強会」を主催。 個人として何か一つでも世の中の多くの人に使ってもらえるものを作ろうと日々奮闘中。
@engineer_osca