ブレイクポイントを考えるのに、一般的にSP、TB、PCは考慮しているが、ブラウザの縦向き・横向きも考慮すると、なかなか情報が整理されていない様に思えたので、シェアトップ6位までをまとめてみた。
結論として、実際に試そうと思うメディアクエリは以下にしてみた。
// タブレット全般
(min-width: 700px)
// PC全般
(min-width: 1280px)
だた、これだとタブレットの横置きがPCとかなり重なっているのと、スマホの横置きとタブレットが重なっているため、昨今ブラウザいっぱいに使う事が増えたヒーロービジュアルには不適当と考えた。
よって、マイナーポイントとして以下4つを追加してみる。
当初はアスペクト比で切り分ける事も考えたが、一覧に整理をしてみるとかなりバラツキがあったので、素直に幅と縦横の向きを組み合わせるのが使い易そうだと思うに至った。
// 幅1370pxまでの横置きタブレット
(orientation: landscape) and (max-width: 1370px)
// 幅1024pxまでの縦置きタブレット
(orientation: portrait) and (max-width: 1024px)
// 幅930pxまでの横置きスマホ
(orientation: landscape) and (max-width: 930px)
// 幅430pxまでの縦置きスマホ
(orientation: portrait) and (max-width: 430px)
解像度別シェア状況 デスクトップ
| 解像度 | 長辺/短辺 | landscape(%) | portrait(%) | シェア率 |
|---|---|---|---|---|
| 1920 x 1080 | 16 : 9 | 56.3 | 117.7 | 25.71 |
| 1536 x 864 | 16 : 9 | 56.3 | 117.7 | 11.61 |
| 1366 x 768 | 683 : 384 | 56.2 | 177.9 | 9.55 |
| 1280 x 720 | 16 : 9 | 56.3 | 117.7 | 5.66 |
| 1440 x 900 | 8 : 5 | 62.5 | 160.0 | 5.48 |
| 2560 x 1440 | 16 : 9 | 56.3 | 117.7 | 3.69 |
| 解像度 | 長辺/短辺 | landscape(%) | portrait(%) | シェア率 |
|---|---|---|---|---|
| 768 x 1024 | 4 : 3 | 75.0 | 133.3 | 34.32 |
| 810 x 1080 | 4 : 3 | 75.0 | 133.3 | 11.47 |
| 834 x 1194 | 199 : 139 | 69.9 | 143.2 | 7.39 |
| 820 x 1180 | 59 : 41 | 69.5 | 143.9 | 7.01 |
| 744 x 1133 | 1133 : 744 | 65.7 | 152.3 | 6.34 |
| 1024 x 1366 | 683 : 512 | 74.0 | 113.4 | 4.30 |
| 解像度 | 長辺/短辺 | landscape(%) | portrait(%) | シェア率 |
|---|---|---|---|---|
| 390 x 844 | 422 : 195 | 46.2 | 216.4 | 20.21 |
| 375 x 667 | 667 : 375 | 56.2 | 117.9 | 12.73 |
| 375 x 812 | 812 : 375 | 46.1 | 216.5 | 10.96 |
| 414 x 896 | 448 : 207 | 46.2 | 216.4 | 10.38 |
| 428 x 926 | 463 : 214 | 46.2 | 216.4 | 4.90 |
| 412 x 915 | 915 : 412 | 45.0 | 222.1 | 2.86 |