ブレイクポイント、メディアクエリの最小値は？

基本は375pxからだが。

320pxも現存している。

Webデザイナーを悩ますブレイクポイント。

Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。

スマホの元祖である、初代iPhoneの横幅は320pxだった。それが基準となっているのか、2023年7月末時点でも、度々320pxからのアクセスがある。

解像度の例１

例えば月間約15,000ユーザーのサイトで、30位以内に90ユーザーほど計測されていた。

解像度の例2

上記とは異業種の、月間約40,000ユーザーのサイトでも、20位以内に約560ユーザーのアクセスがある。

Androidスマホでは、360pxのデバイスもある。

なぜ320pxが？

320pxのデバイスといえは、iPhone SEの第一世代も該当するが、さすがにレアケースだろう。

320pxユーザーの推定。

推定としては、iPhone 8、iPhone SE 第２世代、iPhone 12〜iPhone 13、iPhone 12 pro 〜 iPhone 14シリーズの一部で「拡大（Zoom）」機能を使っているユーザーが一定数いると考えられる。

参考：iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか？

拡大（Zoom）機能とは？

iPhoneの画面を三本指でダブルタップ、トリプルタップすると、画面が拡大する機能。

メディアクエリをどうするか？

375pxや360pxのデバイスもある。

モバイルファーストとユーザーファースト。

iPhone 8〜iPhone 13 mini、iPhone SEシリーズの一部、iPhone 14シリーズの一部（「拡大（Zoom）」機能含め）は375pxとなっている。

解像度の例3

解像度の例4

360pxのデバイスも9位にランクインしている。

メディアクエリでのブレイクポイントの指定例。

モバイルファーストで書く。

メディアクエリはモバイルファーストで書いた方が良い。パソコン向けから書いてしまうと、CSSの読み込み量が多くなり、結果的にスマホサイトの表示が遅くなってしまう。

一般的なサイトの場合、アクセス数自体もパソコンよりもスマホ（モバイル）の方が多い。

モバイルファーストについては、Googleも推奨し続けている。

ブレイクポイントの書き方の具体例。

以下のような記述であれば、320pxや360px、375pxという記述をする必要がない。

399pxや599px以下、666pxや567px以下の場合は、自動的に画面幅に合わせたレイアウトとなる。

/*399px以下の記述。*/
.content {
 width: 100%;
 padding: 1%;
}

/*400px以上の記述。*/
@media (min-width: 400px){
.content {
 padding: 2%;
 }
}

/*1000px以上の記述。*/
@media (min-width: 1000px){
.content {
 padding: 3%;
 }
}

/*599px以下の記述。*/
.content {
 width: 100%;
 padding: 10px;
}

/*600px以上の記述。*/
@media (min-width: 600px){
.content {
 padding: 15px;
 }
}

/*1000px以上の記述。*/
@media (min-width: 1000px){
.content {
 padding: 20px;
 }
}

/*666以下の記述。*/
.content {
 width: 100%;
 padding: 1%;
}

/*667px以上の記述。*/
@media (min-width: 667px){
.content {
 padding: 2%;
 }
}

/*1024px以上の記述。*/
@media (min-width: 1024px){
.content {
 padding: 3%;
 }
}

/*567px以下の記述。*/
.content {
 width: 100%;
 padding: 10px;
}

/*568px以上の記述。*/
@media (min-width: 568px){
.content {
 padding: 15px;
 }
}

/*1024px以上の記述。*/
@media (min-width: 1024px){
.content {
 padding: 20px;
 }
}

結論。

• @media (min-width: 320px){}の書き方はほとんど意味がない。
• 375px、414pxなどの数値も、新しいデバイスが発売されるたびに変わるので、明確な答えにはならない。
• 余白用のpaddingやmarginは、パーセントでの指定か、小さくキリがよいピクセルで指定する。

※2023.08.12 追記）

デジタル庁が公開しているデザインシステムでは、ブレイクポイントは次のようになっている。
（モバイルはポートレートとランドスケープで切り替えない仕様。）

• モバイル：0〜520px
• タブレット：521px〜960px
• デスクトップ：961px〜

引用元サイト：Design System 1.3.3 – Figma

例5）

デジタル庁のデザインシステムの場合。（要素やクラス名、プロパティや値は仮のもの。）

/*520px以下の記述。（モバイル）*/
.content {
 width: 100%;
 padding: 1%;
}

/*521px〜960pxの記述。（タブレット）*/
@media (min-width: 521px){
.content {
 padding: 1.5%;
 }
}

/*961px以上の記述。（デスクトップ）*/
@media (min-width: 961px){
.content {
 padding: 2%;
 }
}

補足。

petsユーザーファースト。

ユーザーファーストを考慮しつつ、サイトの特性や職場環境、クライアントの要望、ターゲットとするスマホやタブレットのサイズに合わせて調整すると良い。

petsmax-width。

「max-width: 1000px;」などはレイアウト崩れの原因となるので使わない方が無難。

参考：CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。

petsメディアクエリ。

メディアクエリは現在はもう「@media screen and〜」と書く必要はなく、「@media〜」で大丈夫となっている。

petsiPhoneの拡大（Zoom）機能。

引用元：How To Use Display Zoom iPhone 13 by TomsTechReviews

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。