ホームページ制作

iPhone/iPad/Apple Watch他、レスポンシブデザインに役立つ解像度(画面サイズ)早見表

この記事では、iPhone/iPad/Appleなどのスマートフォン・タブレットの画面解像度を一覧にしてご紹介しております。 レスポンシブデザインのコーディングなどにお役立てください。

サイズ端末ポイントRetinaピクセル倍率デバイスアスペクト比
3.5iPhone
iPhone 3G
iPhone 3GS
320×4801320×4801320×4802:3
3.5iPhone 4
iPhone 4S
320×4802640×9601640×9602:3
4iPhone 5
iPhone 5s
iPhone 5c
iPhone SE
320×5682640×11361640×11369:16
(近似値)
4.7iPhone 6
iPhone 6s
iPhone 7
iPhone 8
iPhone SE(2世代)
375×6672750×13341750×13349:16
(近似値)
4.7
(互換/拡大)
iPhone 6
iPhone 6s
iPhone 7
iPhone 8
iPhone SE(2世代)
320×5682640×11361.17750×13349:16
(近似値)
5.4iPhone 12 mini
iPhone 13 mini
375×81231125×24360.961080×23409:19.5
(近似値)
5.5iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
iPhone 8 Plus
414×73631242×22080.871080×19209:16
5.5
(互換)
iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
iPhone 8 Plus
320×5682640×11361.691080×19209:16
(近似値)
5.5
(拡大)
iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
iPhone 8 Plus
375×66731125×20010.961080×19209:16
(近似値)
5.8iPhone X
iPhone XS
iPhone 11 Pro
375×81231125×243611125×24369:19.5
(近似値)
5.8
(互換)
iPhone X
iPhone XS
iPhone 11 Pro
375×66731125×200111125×20019:16
(近似値)
6.1iPhone XR
iPhone 11
414×8962828×17921828×17929:19.5
(近似値)
6.1iPhone 12
iPhone 12 Pro
iPhone 13
iPhone 13 Pro
390×84431170×253211170×25329:19.5
(近似値)
6.5iPhone XS Max
iPhone 11 Pro Max
414×89631242×268811242×26889:19.5
(近似値)
6.7iPhone 12 Pro Max
iPhone 13 Pro Max
428×92631284×277811284×27789:19.5
(近似値)
7.9iPad mini768×10241768×10241768×10243:4
7.9iPad mini 2
iPad mini 3
iPad mini 4
iPad mini(5世代)
768×102421536×204811536×20483:4
8.3iPad mini(6世代)744×113321488×226611488×22663:4.6
(近似値)
9.7iPad
iPad 2
768×10241768×10241768×10243:4
9.7iPad 3
iPad 4
iPad Air
iPad Air 2
iPad Pro 9.7
768×102421536×204811536×20483:4
10.2iPad(7世代)810×108021620×216011620×21603:4
10.5iPad Pro 10.5
iPad Air(3世代)
834×111221668×222411668×22243:4
10.9iPad Air(4世代)820×118021640×236011640×23603:4.3
(近似値)
11.0iPad Pro 11834×119421668×238811668×23883:4.3
(近似値)
12.9iPad Pro 12.91024×136622048×273212048×27323:4
(近似値)
1.32Watch(初代,S1,S2,S3) 38mm136×1702272×3401272×340
1.5Watch(初代,S1,S2,S3) 42mm156×1952312×3901312×390
Watch(S4,S5,S6,SE) 40mm162×1972324×3941324×394
Watch(S4,S5,S6,SE) 44mm184×2242368×4481368×448
1.69Watch(S7) 41mm176×2152352×4301352×430
1.9Watch(S7) 45mm198×2422396×4841396×484

ハイライトされたCSSピクセルの数値でコーディングします。
iPhone 12 Pro Maxは横幅428px
iPhone 12 Pro、iPhone 12は横幅390px
iPhone 12 miniは横幅360px
iPhone SEは横幅375px
iPhone 11、iPhone XRは横幅414pxです。

画像等を作成する際はデバイスピクセルの数値を参考にしてください。
iPhone 12 Pro Maxは横幅428px x 3倍、
iPhone 12 Pro、iPhone 12は横幅390px x 3倍、
iPhone 12 miniは横幅360px x 3倍、
iPhone SEは横幅375px x 2倍、
iPhone 11、iPhone XRは横幅414px x 2倍のサイズで画像を作ってCSSピクセルの大きさに縮小表示させると画像は鮮明に表示されますす。
ファイルサイズが大きくなり過ぎて速度面で気になる場合は1.5倍位のサイズで画像を作ってもギリギリセーフ、ではないでしょうか。または写真を使わない画像はSVG等を利用するなど、あくまでも個人的見解です。

お問い合わせ・ご相談はこちら

staff-01

expand_less