ユーザーが使用するデバイスやその画面サイズはますます多様化しています。その為、現在でも各デバイスの画面サイズに最適化させるレスポンシブという手法は欠かせません。
一方で、すべてのデバイスに合わせる事は厳しい事や、メディアクエリが重い事で表示速度が遅くなる事を良しとしない考えもあります。
とはいえ、CSSが便利になった事で、メディアクエリやブレイクポイントの見直しも出来るはず。
そこで、メディアクエリのブレイクポイントを決める際の参考用に、国内でシェアの高いiPhoneとiPadの解像度を一覧にしました。
この記事の目次
iPhoneのCSSピクセル解像度
機種 (モデル) | CSSピクセル 解像度 | デバイスピクセル比 Device Pixel Ratio (DPR) | デバイスピクセル 解像度 | 発売日 |
---|---|---|---|---|
iPhone 14 Pro Max | 430 x 932 px | 3 | 1,290 x 2,796 px | 2022 |
iPhone SE(第3世代) | 375 x 667 px | 2 | 750 x 1,334 px | 2022 |
iPhone 13 | 390 x 844 px | 3 | 1,170 x 2,532 px | 2021 |
iPhone 13 mini | 375 x 812 px | 3 | 1,080 x 2,340 px | 2021 |
iPhone 13 Pro | 390 x 844 px | 3 | 1,170 x 2,532 px | 2021 |
iPhone 13 Pro Max | 428 x 926 px | 3 | 1,284 x 2,778 px | 2021 |
iPhone 12 | 390 x 844 px | 3 | 1,170 x 2,532 px | 2020 |
iPhone 12 mini | 375 x 812 px | 3 | 1,080 x 2,340 px | 2020 |
iPhone 12 Pro | 390 x 844 px | 3 | 1,170 x 2,532 px | 2020 |
iPhone 12 Pro Max | 428 x 926 px | 3 | 1,284 x 2,778 px | 2020 |
iPhone SE(第2世代) | 375 x 667 px | 2 | 750 x 1,334 px | 2020 |
iPhone 11 | 414 x 896 px | 2 | 828 x 1,792 px | 2019 |
iPhone 11 Pro | 375 x 812 px | 3 | 1,125 x 2,436 px | 2019 |
iPhone 11 Pro Max | 414 x 896 px | 3 | 1,242 x 2,688 px | 2019 |
iPhone XR | 414 x 896 px | 2 | 828 x 1,792 px | 2018 |
iPhone XS | 375 x 812 px | 3 | 1,125 x 2,436 px | 2018 |
iPhone XS Max | 414 x 896 px | 3 | 1,242 x 2,688 px | 2018 |
iPhone 8 | 375 x 667 px | 2 | 750 x 1,334 px | 2017 |
iPhone 8 Plus | 414 x 736 px | 3 | 1,242 x 2,208 px | 2017 |
iPhone X | 375 x 812 px | 3 | 1,125 x 2,436 px | 2017 |
iPhone 7 | 375 x 667 px | 2 | 750 x 1,334 px | 2016 |
iPhone 7 Plus | 414 x 736 px | 3 | 1,242 x 2,208 px | 2016 |
iPhone SE(第1世代) | 320 x 568 px | 2 | 640 x 1,136 px | 2016 |
iPadのCSSピクセル解像度
機種 (モデル) | CSSピクセル 解像度 | デバイスピクセル比 Device Pixel Ratio (DPR) | デバイスピクセル 解像度 | 発売日 |
---|---|---|---|---|
iPad(第10世代) | 820 x 1,180 px | 2 | 1,640 x 2,360 px | 2022 |
iPad Pro 11(第4世代) | 834 x 1,194 px | 2 | 1,668 x 2,388 px | 2022 |
iPad Pro 12.9(第6世代) | 1,024 x 1,366 px | 2 | 2,048 x 2,732 px | 2022 |
iPad Air(第5世代) | 820 x 1,180 px | 2 | 1,640 x 2,360 px | 2022 |
iPad(第9世代) | 810 x 1,080 px | 2 | 1,620 x 2,160 px | 2021 |
iPad mini(第6世代) | 744 x 1,133 px | 2 | 1,488 x 2,266 px | 2021 |
iPad Pro 12.9(第5世代) | 1,024 x 1,366 px | 2 | 2,048 x 2,732px | 2021 |
iPad Pro 11(第3世代) | 834 x 1,194 px | 2 | 1,668 x 2,388 px | 2021 |
iPad Pro 11(第2世代) | 834 x 1,194 px | 2 | 1,668 x 2,388 px | 2020 |
ブレイクポイントに関係するDPRとは
Device Pixel Ratio (DPR:デバイスピクセル比) とは、CSS解像度と物理解像度の比率の事です。
DPR = デバイスピクセル / CSSピクセル
簡単に言うと、CSSの1pxを表示するのにどれ位の物理ピクセルが使われているかを比率で表しています。
RetinaディスプレイやSuper Retina XDRディスプレイが美しいのはCSSの1pxあたりの物理ピクセルの密度が高く高精細に表示されるからですね。
CSSでメディアクエリを書く時や、画像書き出しの際にこれらの数値が役に立ちます。
メディアクエリのブレイクポイントはどう決める?
すべてのデバイスに合わせるのは現実的ではありません。ましてや細かく調整する為にメディアクエリでブレイクポイントを増やしていてはキリが無いです。
読み込みが重くなり、作業工数も増えていくのは避けたいところ。ブレイクポイントを決める際、よく言われるのは「マーケティングの視点で考える」という事です。
- 自分達のターゲット層が良く使うのは、スマホかPCか。
- その時々でのシェア率の多いブレイクポイントに合わせる。
- 競合サイトを参考にしてみる。
とはいえ、闇雲に調べるのは大変ですよね。
実は、日本国内におけるスマホやPCの画面サイズなど、シェア別での統計データを見れるサイトがあるので紹介します。
ブレイクポイントの参考に出来るサイトやアプリ
実際にスマホやPCのシェア率などの統計データや、制作者が参考に出来るものを幾つか紹介します。上司やクライアントに説明する際も、説得力があった方が良いですから。
- シェア率を調べる統計ツールを参考にする。
- 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がアップデート出来ず利用自体に問題
古いスマホの利用者は少なく、必然的にアクセスも少ないです。高いコンバージョンも見込めないなら無視しても良いかも知れません。
また、今後出てくる新機種の場合であれば、どんな解像度か判らないので最低限レイアウトが崩れない作り方をしておけば良いと思います。