iPhoneの解像度表 CSSのメディアクエリやブレイクポイントの参考に

画像:最新のiPhoneの解像度一覧。CSSピクセルやデバイスピクセル解像度など、メディアクエリのブレイクポイントの参考に。

ユーザーが使用するデバイスやその画面サイズはますます多様化しています。その為、現在でも各デバイスの画面サイズに最適化させるレスポンシブという手法は欠かせません。

一方で、すべてのデバイスに合わせる事は厳しい事や、メディアクエリが重い事で表示速度が遅くなる事を良しとしない考えもあります。

とはいえ、CSSが便利になった事で、メディアクエリやブレイクポイントの見直しも出来るはず。

そこで、メディアクエリのブレイクポイントを決める際の参考用に、国内でシェアの高いiPhoneとiPadの解像度を一覧にしました。

iPhoneのCSSピクセル解像度

機種
(モデル)
CSSピクセル
解像度
デバイスピクセル比
Device Pixel Ratio
(DPR)
デバイスピクセル
解像度
発売日
iPhone 14 Pro Max430 x 932 px31,290 x 2,796 px2022
iPhone SE(第3世代)375 x 667 px2750 x 1,334 px2022
iPhone 13390 x 844 px31,170 x 2,532 px2021
iPhone 13 mini375 x 812 px31,080 x 2,340 px2021
iPhone 13 Pro390 x 844 px31,170 x 2,532 px2021
iPhone 13 Pro Max428 x 926 px31,284 x 2,778 px2021
iPhone 12390 x 844 px31,170 x 2,532 px2020
iPhone 12 mini375 x 812 px31,080 x 2,340 px2020
iPhone 12 Pro390 x 844 px31,170 x 2,532 px2020
iPhone 12 Pro Max428 x 926 px31,284 x 2,778 px2020
iPhone SE(第2世代)375 x 667 px2750 x 1,334 px2020
iPhone 11414 x 896 px2828 x 1,792 px2019
iPhone 11 Pro375 x 812 px31,125 x 2,436 px2019
iPhone 11 Pro Max414 x 896 px31,242 x 2,688 px2019
iPhone XR414 x 896 px2828 x 1,792 px2018
iPhone XS375 x 812 px31,125 x 2,436 px2018
iPhone XS Max414 x 896 px31,242 x 2,688 px2018
iPhone 8375 x 667 px2750 x 1,334 px2017
iPhone 8 Plus414 x 736 px31,242 x 2,208 px2017
iPhone X375 x 812 px31,125 x 2,436 px2017
iPhone 7375 x 667 px2750 x 1,334 px2016
iPhone 7 Plus414 x 736 px31,242 x 2,208 px2016
iPhone SE(第1世代)320 x 568 px2640 x 1,136 px2016

iPadのCSSピクセル解像度

機種
(モデル)
CSSピクセル
解像度
デバイスピクセル比
Device Pixel Ratio
(DPR)
デバイスピクセル
解像度
発売日
iPad(第10世代)820 x 1,180 px21,640 x 2,360 px2022
iPad Pro 11(第4世代)834 x 1,194 px21,668 x 2,388 px2022
iPad Pro 12.9(第6世代)1,024 x 1,366 px22,048 x 2,732 px2022
iPad Air(第5世代)820 x 1,180 px21,640 x 2,360 px2022
iPad(第9世代)810 x 1,080 px21,620 x 2,160 px2021
iPad mini(第6世代)744 x 1,133 px21,488 x 2,266 px2021
iPad Pro 12.9(第5世代)1,024 x 1,366 px22,048 x 2,732px2021
iPad Pro 11(第3世代)834 x 1,194 px21,668 x 2,388 px2021
iPad Pro 11(第2世代)834 x 1,194 px21,668 x 2,388 px2020

ブレイクポイントに関係するDPRとは

Device Pixel Ratio (DPR:デバイスピクセル比) とは、CSS解像度物理解像度の比率の事です。

DPR = デバイスピクセル / CSSピクセル

簡単に言うと、CSSの1pxを表示するのにどれ位の物理ピクセルが使われているかを比率で表しています。

RetinaディスプレイやSuper Retina XDRディスプレイが美しいのはCSSの1pxあたりの物理ピクセルの密度が高く高精細に表示されるからですね。

CSSでメディアクエリを書く時や、画像書き出しの際にこれらの数値が役に立ちます。

メディアクエリのブレイクポイントはどう決める?

すべてのデバイスに合わせるのは現実的ではありません。ましてや細かく調整する為にメディアクエリでブレイクポイントを増やしていてはキリが無いです。

読み込みが重くなり、作業工数も増えていくのは避けたいところ。ブレイクポイントを決める際、よく言われるのは「マーケティングの視点で考える」という事です。

  • 自分達のターゲット層が良く使うのは、スマホかPCか。
  • その時々でのシェア率の多いブレイクポイントに合わせる。
  • 競合サイトを参考にしてみる。

とはいえ、闇雲に調べるのは大変ですよね。

実は、日本国内におけるスマホやPCの画面サイズなど、シェア別での統計データを見れるサイトがあるので紹介します。

ブレイクポイントの参考に出来るサイトやアプリ

実際にスマホやPCのシェア率などの統計データや、制作者が参考に出来るものを幾つか紹介します。上司やクライアントに説明する際も、説得力があった方が良いですから。

  1. シェア率を調べる統計ツールを参考にする。
  2. Adobeの制作アプリで用意してあるデフォルトサイズを参考にする。

Statcounter GlobalStats

日本国内におけるスマホの画面解像度を統計データとして見る事が出来ます。

もちろん、スマホ以外にもタブレットやPCのディスプレイ解像度もありますし、AndroidやiOSなどのシェア率もデータとして確認出来ます。

統計時期も選べるので、その時々で必要なものに切り替えて下さい。

スマホシェア毎の解像度の参考:Mobile Screen Resolution Stats Japan

Adobeのアプリを参考にする

XDなどのプロトタイプ作成アプリであれば、CSSピクセル解像度でのアートボードが複数用意されています。

Photoshopなら主要なデバイスピクセル解像度のプリセットが上の方に表示されています。

ブレイクポイントが決まらないとデザイナーやコーダーは作業が進められませんよね。マーケディング担当がチームに居ないとか、そもそも全部自分で決めているなら参考にしても良いのではないかと思います。

スマホのブレイクポイントに正解は無いけれど・・・

今では「Pro Max」など大きめの解像度もありますが、スマホのブレイクポイントはタブレット以下である事に変わりは有りません。

先に書いた様に「マーケティングの視点で考える」と、絶対的な正解サイズも無いと思います。

統計サイトやAdobeのアプリを参考にするなら、各デバイスごとのブレイクポイントはこんな感じでしょうか。

デバイスシェアの多いブレイクポイント
スマートフォン375〜430px
タブレット744〜834px

ブレイクポイントを上手く設定すればメディアクエリも簡潔になりますよね。

パソコンのディスプレイは1280~1920pxが多数を占めます。ですが、ブラウザをどれくらい広げて使うのかは不明です。

ブラウザ自体を画面いっぱいに広げて使う人は少ない事を鑑みると、コンテンツ幅は1280px位が丁度良いのかも知れません。

まとめ:デバイスへの対応はどこまで必要?

すでに運用しているサイトの場合、アクセスしてくるスマホの解像度を調べるかと思います。そこで気になるのは古いデバイスへの対応です。

例えば、CSSピクセル解像度が320pxのiPhoneだと発売日が2016年です。今も日常的に使っている人は居るでしょうか?

現実的に考えると、古いデバイスでは以下の事が懸念されますよね。

  • そもそもバッテリーが持たないはず
  • iOSがアップデート出来ず利用自体に問題

古いスマホの利用者は少なく、必然的にアクセスも少ないです。高いコンバージョンも見込めないなら無視しても良いかも知れません。

また、今後出てくる新機種の場合であれば、どんな解像度か判らないので最低限レイアウトが崩れない作り方をしておけば良いと思います。