【最新機種】各iOSデバイスの解像度・ブレイクポイントの参考

この記事は、これまでに発売されてきたiOSデバイス（iPhone、iPadなど）の実機画面解像度やピクセル数などを一覧表で書き記しています。
CSSのメディアクエリでレスポンシブ対応する場合のブレイクポイントの設定や、検証でのデバックなどに使って下さい。

※新機種が発売される度に更新していく予定です。なので最新のiPhone SE（第2世代）もあります。

最新機種「iPhone12」シリーズ

最新機種である「iPhone12」シリーズでは6.1インチと6.7インチのサイズです。
解像度に関しては全て新しい数値なのでレスポンイブデザインでは新たな調整が必要になります。

各iOSデバイスの解像度一覧表

下記では各iOSデバイスの解像度（ピクセル数/ポイント数）アスペクト比（縦横比）端末サイズを表でまとめています。
iPhone or iPadのデバイス毎に分けた表と、小中大で分けた表があります。
見やすい方を参考にして下さい。

デバイス別

iPhoneとiPadで分けて紹介します。

iPhone

iPad

サイズ別

小中大で分けて紹介する。

小サイズ（3.5~4.7）

中サイズ(5.5~6.5)

大サイズ(7.9~12.9)

ブレイクポイントの参考

WEBサイトのレスポンシブ化でブレイクポイントを設定する際は基本的にiPhone端末をベースにして考えた方が良いでしょう。Android端末は統一性がほとんど無く何百パターンもの画面サイズが存在します。それに比べてiPhoneは統一されているからです。

通常の考え方だと、上記のiOSデバイス毎の解像度表のサイズから振り分けるので

• 320px～765px（スマホ最小～iPad最小前）
• 768px～1024px（iPad最小～iPad最大）
• それ以上（1025以上）

の3つのブレイクポイントで振り分けるかと思います。

ただ現在のレスポンシブ時のブレイクポイントの振り分けは下記の数値が主流になっています。

• スマホ 320～559px
• タブレット 560～959px
• PC 960px以上

具体的なレスポンシブ化の仕方は以下の記事を参考にして下さい。

メディアクエリの記述の仕方(@media)レスポンシブデザイン

今回は、スマホ時の表示とPC時の表示をCSSで可変できるメディアクエリによるレスポンシブスタイルの記述の仕方を紹介します。また最後には、コピペOKな汎用的に使えるスマホファーストなCSSとPCファーストなCSSも用意しています。

kt-life.net

2020.04.02

スマホファースト

スマホファーストは初めにスマホサイトを作ってから下記のCSSでPC時の見た目を調整。

//*基本559px以下*//
//*560px以上に反映*// @media screen and (min-width: 560px) {…}
//*960px以上に反映*// @media screen and (min-width: 960px) {…}

PCファースト

PCファーストは初めにPCサイトを作ってから下記のCSSでスマホ時の見た目を調整。

//*559px以下に反映*// @media screen and (max-width: 559px) {…}
//*959px以下に反映*// @media screen and (max-width: 959px) {…}
//*基本960px以上*//

対応する端末

320～559px　//基本559px以下//　//559px以下に反映//

タブレット 560～959px　//560px以上に反映//　//959px以下に反映//

PC 960px以上　//960px以上に反映//　//基本960px以上//

以上が「【最新SEあり】各iOSデバイスの解像度・ブレイクポイントの参考」でした。

サイト制作やデバック・検証の時にぜひ参考にしてみて下さい。