にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【2022年10月】iPhone画面解像度まとめ - web design lab

【2022年10月】iPhone画面解像度まとめ


【2022年10月】iPhone画面解像度まとめ

出典: Apple https://www.apple.com/

こんにちは(・∀・)

iPhone画面解像度のページを更新しました。

iPhone画面解像度一覧

この一覧に掲載されている情報は2022年10月の時点でアップルストア オンラインで購入できる製品の情報です。

端末
画面サイズ
(対角)
画面解像度
iPhone 14 Pro Max new!
Super Retina XDRディスプレイ
6.7インチ
デバイスピクセル 2,796 x 1,290 460ppi
CSSピクセル 932 x 430
iPhone 14 Pro new!
Super Retina XDRディスプレイ
6.1インチ
デバイスピクセル 2,556 x 1,179 460ppi
CSSピクセル 852 x 393
iPhone 14 Plus new!
Super Retina XDRディスプレイ
6.7インチ
デバイスピクセル 2,778 x 1,284 458ppi
CSSピクセル 926 x 428
iPhone 14 new!
Super Retina XDRディスプレイ
6.1インチ
デバイスピクセル 2,532 x 1,170 460ppi
CSSピクセル 844 x 390
iPhone 13
Super Retina XDRディスプレイ
6.1インチ
デバイスピクセル 2,532 x 1,170 460ppi
CSSピクセル 844 x 390
iPhone 13 mini
Super Retina XDRディスプレイ
5.4インチ
デバイスピクセル 2,340 x 1,080 476ppi
CSSピクセル 780 x 360
iPhone SE
Retina HDディスプレイ
4.7インチ
デバイスピクセル 1,334 x 750 326ppi
CSSピクセル 667 x 375
iPhone 12
Super Retina XDRディスプレイ
6.1インチ
デバイスピクセル 2,532 x 1,170 460ppi
CSSピクセル 844 x 390

ハイライトされたCSSピクセルの数値でコーディングします。

iPhone 14 Pro Maxは横幅430px
iPhone 14 Pro は横幅393px
iPhone 14 Plus は横幅428px
iPhone 14 は横幅390px
iPhone 13 は横幅390px
iPhone 13 mini は横幅360px
iPhone SE は横幅375px
iPhone 12 は横幅390pxです。

画像等を作成する際はデバイスピクセルの数値を参考にしてください。

iPhone 14 Pro Maxは横幅430px x 3倍、
iPhone 14 Pro は横幅393px x 3倍、
iPhone 14 Plus は横幅428px x 3倍、
iPhone 14 は横幅390px x 3倍、
iPhone 13 は横幅390px x 3倍、
iPhone 13 mini は横幅360px x 3倍、
iPhone SE は横幅375px x 2倍、
iPhone 12 は横幅390px x 3倍のサイズで画像を作ってCSSピクセルの大きさに縮小表示させると画像はキレイに表示されます。

しかし、ファイルサイズが大きくなり過ぎるので1.5倍位のサイズで画像を作っても良いのではないかと思います。

関連ページ

【2021年10月】iPad画面解像度まとめ
【2020年10月】iPhone画面解像度まとめ


にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村