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

Gadget

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

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

最新機種「iPhone12」シリーズ

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

端末サイズポイントピクセル
iPhone 126.1インチ390 x 8442530×1170ピクセル
Super Retina XDRディスプレイ
iPhone 12 Pro6.1インチ390 x 8442530×1170ピクセル
Super Retina XDRディスプレイ
iPhone 12 Pro Max6.7インチ428 x 9262778×1284ピクセル
Super Retina XDRディスプレイ

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

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

デバイス別

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

iPhone

サイズ端末ポイントピクセル縦横比
3.5iPhone iPhone 3G iPhone 3GS320×480320×4802:3
3.5iPhone 4 iPhone 4S320×480640×9602:3
4iPhone 5 iPhone 5s iPhone 5c iPhone SE320×568640×113640:71 ≒ 9:16
4.7iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代)375×667750×1334375:667 ≒ 9:16
4.7 (互換/拡大)iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代)320×568640×1136375:667 ≒ 9:16
5.5iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus414×7361242×22089:16
5.5 (互換)iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus320×568640×11369:16
5.5 (拡大)iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus375×6671125×20019:16
5.8iPhone X375×8121125×2436375:812 ≒ 9:19.5
5.8 (互換)iPhone X
iPhone XS
375×6671125×2001375:667 ≒ 9:16
6.1iPhone XR
iPhone 11
414×896828×1792207:448 ≒ 9:19.5
6.5iPhone XS Max
iPhone 11 Pro Max
414×8961242×2688207:448 ≒ 9:19.5

iPad

サイズ端末ポイントピクセル縦横比
7.9iPad Mini768×1024768×10243:4
7.9iPad Mini 2 iPad Mini 3 iPad Mini 4 iPad Mini(5世代)768×10241536×20483:4
9.7iPad iPad 2768×1024768×10243:4
9.7iPad 3 iPad 4 iPad Air iPad Air 2 iPad Pro 9.7768×10241536×20483:4
10.2iPad(7世代)810×10801620×21603:4
10.5iPad Pro 10.5 iPad Air(3世代)834×11121668×22243:4
11.0iPad Pro 11834×11941668×2388139:199
12.9iPad Pro 12.91024×13662048×2732512:683 ≒ 3:4

サイズ別

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

小サイズ(3.5~4.7)

サイズ端末ポイントピクセル縦横比
3.5iPhone iPhone 3G iPhone 3GS320×480320×4802:3
3.5iPhone 4 iPhone 4S320×480640×9602:3
4iPhone 5 iPhone 5s iPhone 5c iPhone SE320×568640×113640:71 ≒ 9:16
4.7iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代)375×667750×1334375:667 ≒ 9:16
4.7 (互換/拡大)iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代)320×568640×1136375:667 ≒ 9:16

中サイズ(5.5~6.5)

サイズ端末ポイントピクセル縦横比
5.5iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus414×7361242×22089:16
5.5 (互換)iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus320×568640×11369:16
5.5 (拡大)iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus375×6671125×20019:16
5.8iPhone X375×8121125×2436375:812 ≒ 9:19.5
5.8 (互換)iPhone X iPhone XS375×6671125×2001375:667 ≒ 9:16
6.1iPhone XR414×896828×1792207:448 ≒ 9:19.5
6.5iPhone XS Max414×8961242×2688207:448 ≒ 9:19.5

大サイズ(7.9~12.9)

サイズ端末ポイントピクセル縦横比
7.9iPad Mini768×1024768×10243:4
7.9iPad Mini 2 iPad Mini 3 iPad Mini 4 iPad Mini(5世代)768×10241536×20483:4
9.7iPad iPad 2768×1024768×10243:4
9.7iPad 3 iPad 4 iPad Air iPad Air 2 iPad Pro 9.7768×10241536×20483:4
10.2iPad(7世代)810×10801620×21603:4
10.5iPad Pro 10.5 iPad Air(3世代)834×11121668×22243:4
11.0iPad Pro 11834×11941668×2388139:199
12.9iPad Pro 12.91024×13662048×2732512:683 ≒ 3:4

ブレイクポイントの参考

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

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

  • 320px~765px(スマホ最小~iPad最小前)
  • 768px~1024px(iPad最小~iPad最大)
  • それ以上(1025以上)

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

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

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

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

スマホファースト

スマホファーストは初めにスマホサイトを作ってから下記の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以下に反映//

iPhoneiPhone 3G
iPhone 3GSiPhone 4
iPhone 4SiPhone 5
iPhone 5siPhone 5c
iPhone SEiPhone 6
iPhone 6siPhone 7
iPhone 8iPhone SE(2世代)
iPhone 6 PlusiPhone 6s Plus
iPhone 7 PlusiPhone 8 Plus
iPhone XiPhone XS
iPhone XRiPhone XR Max

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

iPad MiniiPad Mini 2
iPad Mini 3iPad Mini 4
iPad Mini(5世代)iPad
iPad 2iPad 3
iPad 4iPad Air
iPad Air 2iPad Pro 9.7
iPad(7世代)iPad Pro 10.5
iPad Air(3世代)iPad Pro 11

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

iPad Pro 12.9その他PC全般

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

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

2020年7月16日GadgetCSS,Hardware,WEB

Posted by KT