今や当たり前のレスポンシブコーディングですが、メディアクエリでスマホやタブレット用のスタイルを切り替える時のブレイクポイントは結局何ピクセルにすればいいんだ...と迷うこと、ありませんか？
私も定期的に迷う時期がくるのですが、今回、少し詳しめに調べてみて、個人的に考察してみたのでメモしておきます。
はじめに - CSSピクセル・dp解像度について
まずはじめに解像度に関する用語について、説明しておきます。
CSSピクセル
メディアクエリのブレイクポイントにもなる、CSSで使うようなピクセルの単位のことを「CSSピクセル」と言います。（デバイスピクセルと表記されている場合もあります。）
メディアクエリで「@media (max-width: 〇〇px)」というような記述をするかと思いますが、この時の「〇〇px」が「CSSピクセル」です。
例えば、iPhone6 の画面解像度は 750px × 1334px（横 × 高さ）ですが、デバイスピクセル比が 2 のRetinaディスプレイなので、WEBサイトなどで表示されているサイズは 375px × 667px です。この 「375px × 667px」の方が「CSSピクセル」です。
説明のため、「画面解像度」や「デバイスピクセル比」という用語も出しましたが、今回のメモではこれらの意味を理解しておく必要は特にありません。
dp解像度
Android端末は少し特殊な解像度の仕組みがあるようで、CSSピクセルに該当するのが「dp解像度」と呼ばれるものらしいです。
dp解像度についての詳細はとりあえず置いといて、Android端末でメディアクエリの指定に使うピクセルは「dp解像度」を見ればいいということをまずは知って置いてください。
iPhone・iPadのブレイクポイント一覧
iPhoneやiPadについてはよくご存知な方も多いと思いますが、一応まとめておきます。
他の解像度が混ざっているとややこしいので、メディアクエリで使うCSSピクセル幅だけを表記することとします。
iPhoneのCSSピクセルサイズ表
| 端末 | 横幅[csspx] | 高さ[csspx] |
|---|---|---|
| iPhone [4 / 4s] | 320 | 480 |
| iPhone [5 / 5s / 5c / SE] | 320 | 568 |
| iPhone [6 / 6s / 7 / 8] | 375 | 667 |
| iPhone [6 Plus / 6s Plus / 7 Plus / 8 Plus] | 414 | 736 |
| iPhone X | 375 | 812 |
iPadのCSSピクセルサイズ表
| 端末 | 横幅[csspx] | 高さ[csspx] |
|---|---|---|
| iPad | 768 | 1024 |
| iPad [ Mini / Air / Pro 9.7] | 768 | 1024 |
| iPad Pro | 1024 | 1366 |
Android端末のブレイクポイントについて
Androidは様々な種類の端末があります。これからもその数はかなり増えていくでしょう。
しかし、メジャーな端末ではdp解像度は数パターンほどしかありません。
例えば、2016年発売Android端末のdp解像度まとめ という記事によると、2016年に発売されたモバイル端末のほとんどが、dp解像度「360x640」のサイズになっています。
このように、Android端末は数が多すぎるので、主な端末サイズを数パターンに分けて表にしておこうと思います。
以下の記事を参考にしています。
Andoroidモバイル端末の主なdpサイズ
| 端末サイズ | 横幅[dp] | 高さ[dp] |
|---|---|---|
| Sサイズ | 320 | 533.333... |
| Mサイズ | 360 |
640 |
| Lサイズ | 480 | 853.333... |
Andoroidタブレット端末の主なdpサイズ
| 端末サイズ | 横幅[dp] | 高さ[dp] |
|---|---|---|
| Sサイズ | 600 | 960 |
| Mサイズ | 768 |
1024 |
| Lサイズ | 800 | 1280 |
メディアクエリのブレイクポイントは結局何ピクセルなのか
これは、「そのサイトがどこまで細かく対応するのか」によると思います。
そこで、どの程度までレスポンシブ対応するかによって、ブレイクポイントの設定をどうするのがよいのか、いくつかパターン分けしてみようと思います。
まずはモバイル・タブレット・縦横のざっくりとした区分け
とりあえず、モバイルやタブレットのサイズがだいたいどれくらいの範囲に収まるのかをざっくりと整理してみて、これをもとにブレイクポイントの基準を決めていきたいと思います。
私が考えた区分け時のポイントは以下。
- モバイル端末は現状、縦向き時の幅は480以下のものがほとんど
- iPhone5系やAndroidの小さいものは横向きの幅が500代
- タブレットは小さくても縦向きの幅600pxからと考えても良さそう。
これをもとに、だいたい次のような区分けができるのではないでしょうか。
- モバイル（縦）：~ 499px
- モバイル（横）& タブレット（縦）：500px ~ 899px
- タブレット（横）：900px ~ 1280px
フォントサイズについて
モバイル（縦）でのフォントサイズは基本的にvwを使うものと仮定します。
フォントサイズをpx/remで指定する人は、モバイル区域の中でさらに細かく分けていく必要があるかと思いますが、ここではフォントサイズのためだけのメディアクエリは考慮しないものとします。
メディアクエリ区分け案
パターン1：しっかりレスポンシブ
デスクトップのコンテンツの表示幅が1200pxのサイトの場合で考えてみます。
だいたい以下の4区に分けるといい感じに区分けるのではないでしょうか。
- モバイル（縦）：~ 499px
- タブレット（縦）＆モバイル（横）：500px ~ 899px
- タブレット（横）：900px ~ 1199px
- デスクトップ：1200px~
iPhone4系は横向きでも「モバイル（縦）」の区分けに入りますが、iPhon4系はそろそろ考慮しなくて良いレベルかと思います。
パターン2：シェア数の少ないモバイルの横向きを妥協
- モバイル（縦）：~ 599px
- タブレット（縦）＆モバイル（横）：600px ~ 899px
- タブレット（横）：900px ~ 1199px
- デスクトップ：1200px~
「モバイル（縦）」と「タブレット（縦）」のブレイクポイントを500pxから600pxにずらしています。
現在では「モバイル（縦）」は大きくても480pxまでですが、今後の事も考え、「タブレット（縦）」の600pxまで範囲を広げたパターンです。
iPhone5系とAndroidのいくつかの端末では、横向きでも「モバイル（縦）」の区分けに入ってしまい、フォントサイズにvwを使っていると、テキストの情報量が少なくなります。
これを妥協しても良い場合、または、フォントサイズがpx/rem指定の場合はこちらで特に問題ないかと思います。
また、vwを使っている場合は上記に加えてメディアクエリの orientation で横向きのスタイルを調節してもいいですね。
パターン3：タブレットはスクトップ表示（viewportでコンテンツ幅固定）
タブレット端末はデスクトップ表示と同じでいい場合。
タブレットの場合にviewportを1200pxに固定しておきます。（デスクトップのコンテンツの表示幅が1200pxのサイトとして）
- モバイル（縦）：~ 499px
- モバイル（横）：500px ~ 899px
- タブレット＆デスクトップ：900px~
パターン4：タブレット端末はデスクトップ表示・モバイル端末の横向きの可読性を妥協
タブレットはデスクトップの表示と同じでいいし、モバイル端末は縦向きがしっかりしてればいいや、というサイトの場合。
こちらも、タブレットの場合にviewportを1200pxに固定しておきます。（デスクトップのコンテンツの表示幅が1200pxのサイトとして）
- モバイル：~ 899px
- タブレット＆デスクトップ：900px~
メディアクエリについて
実際のメディアクエリのコードを今回はあえて省きました。コピペばかりでメディアクエリを理解していない人がかなり多いんじゃないかと思いまして。
そこで、メディアクエリについてかなり基本的なことから整理してみました。
是非、こちらを参考にしてみてください。
コメント
コメント一覧 （1件）
近々発売の Pixel 3、 Pixel 3 XL のCSSピクセル（dpサイズ）が判明したら、追記してくださいますか(｀・ω・´)