ブレイクポイントはどうするか？

「拡大表示」の機能はiPhone13でも搭載されているため、CSSのブレイクポイントの設定が悩ましい。

近年、ブレイクポイントの最小値は、iPhoneに多い375px以上が主流となっているが、再考が必要かもしれない。

場合によっては320pxでの設計をした方が良いかもしれない。また、AndroidのXperiaやRakuten Handには横幅360pxもある。

ノッチと角丸の影響。（SafeArea問題。）

また、ノッチや角丸なディスプレイがあるiPhoneは、そのノッチや角丸の部分がCSSのブレイクポイントとズレる。

画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11
Killian THORON さま

例えばiPhone 12 miniの縦のサイズは812pxだが、CSSのブレイクポイントを812pxに指定してもノッチや角丸の領域部分がズレるので、実際には812pxではなく、768px以下となる。

そのため場合によっては「viewport-fit=cover」の指定が必要となる。

（※iOSのChromeはカバーされないが、シェア率が低く、スマホを横にしてサイトを見るユーザーは少ないので、プログレッシブエンハンスメント的に割り切る。）

iPhoneの解像度を確認してみると。

引用元サイト：iPhoneの拡大表示時の解像度一覧 Display Zoom Mode
著者：Shinさま

となっている。

Retinaディスプレイ。

2010年頃のRetinaディスプレイ登場からは、デバイス画面の物理ピクセル = CSSのピクセルとはなっていないので、注釈として…

• 元々はMacやiPhoneのディスプレイは72px/inch、Winのディスプレイは96px/inchであり、1インチ（2.54cm）あたりのピクセル数は72個や96個だった。
• Retinaディスプレイとそれに続いた高解像度ディスプレイにより、現在はピクセルの密度が2倍や3倍となっている。（1インチあたりのピクセルが2倍の144、3倍の216というような感じ。）
• 上記表のScale（スケール）の2.0や3.0が、2倍や3倍の密度を表す。

なので、例えばiPhone 13の画面解像度は「1170×2532」であるが、CSSでのピクセル指定は3分の1にギュッと絞って、「390×844」となる。

（元々のピクセル1px分の中に3px分が入っており、きめ細かい高精度な画面となっている。）

上記の表にZoomedという記述があるが、これが「拡大表示」モードで、「3.65625」や「3.375」、「2.34375」などとなり、横幅320pxの正体のようだ。

2022年時点では、横幅320pxは全体の2％弱のユーザー数。

Googleアナリティクスの11位〜20位。（10位以内に横幅320pxはなし。）

横幅360pxのユーザーも一定数いる。

Googleアナリティクスの1位〜10位。

横幅320pxは少数ではあるが、XperiaのモデルやRakuten Handなどの新しいスマホでも、横幅360pxのデバイスが発売されており使用もされている。

そのようなデバイスの場合、横幅375pxでサイトを設計すると、表示が崩れる原因となる。公的なサイトなど、場合によっては気をつけた方が良いかもしれない。