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 4 | 320px | 480px |
| iPhone 4s | ||
| iPhone 5 | 320px | 568px |
| iPhone 5s, 5c | ||
| iPhone 6 | 375px | 667px |
| iPhone 6s | ||
| iPhone 7 | ||
| iPhone 6 | 414px | 736px |
| iPhone 6s Plus | ||
| iPhone 7 Plus |
iPad
続いて iPad の Safari の解像度です。
| デバイス | サイズ |
|---|---|
| iPad, iPad mini, iPad Air | 768px × 1,024px |
| iPad Pro | 1,024px x 1,366px |
iPod touch
最後に iPod touch です。 iPhone と解像度は一緒ですね。
| デバイス | 幅 | 高さ |
|---|---|---|
| iPod touch (第4世代) | 320px | 480px |
| iPod touch (第5世代) | 320px | 568px |
筆者の考察
ここからは筆者の考察になりますが、スマートフォン, タブレット, PC の3つ向けにレスポンシブルデザインなページを作成する際には、筆者は下記のような幅指定を行って3つのデザインが変化するようにしています。
| 対象デバイス | 対象のデバイスの幅 | min-width の指定 |
|---|---|---|
| スマートフォン | 320px ≦ width ＜ 660px | 320px |
| タブレット | 660px ≦ width ＜ 1024px | 660px |
| タブレット, PC | 1024px ≦ width | 1024px |
タブレットの解像度を 660px からとしているのは特に重大な理由はありませんが、幅が 660px あれば左右に 10px の幅(padding)をもった状態で 640px 幅の画像を表示できるからです。 640px 前後がタブレットの解像度として十分情報を詰め込める最低の幅がこのくらいだろうと思っています。
おわりに
今後しばらくは、日本では iOS の端末の占める割合は多いでしょうし、そうでなくてもスマートフォン、タブレット、PCという3種類の端末が主流でしょうから、3つの解像度は意識したWEBサイト製作していくことが必要でしょう。
