iOS・Android端末のCSSピクセル・dp解像度一覧。レスポンシブでメディアクエリのブレイクポイントは結局何ピクセルなのか?はどこまで対応するかで変わる。WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。ホームWEMOについて人気記事一覧フロントエンドHTMLCSS/SassJavaScriptSVGバックエンドPHPサーバーWordPress基礎知識カスタマイズプラグインちょいメモ集iOS・Android端末のCSSピクセル・dp解像度一覧。レスポンシブでメディアクエリのブレイクポイントは結局何ピクセルなのか?はどこまで対応するかで変わる。2019.08.13今や当たり前のレスポンシブコーディングですが、メディアクエリでスマホやタブレット用のスタイルを切り替える時のブレイクポイントは結局何ピクセルにすればいいんだ...と迷うこと、ありませんか?私も定期的に迷う時期がくるのですが、今回、少し詳しめに調べてみて、個人的に考察してみたのでメモしておきます。CSSピクセル・dp解像度についてまずはじめに解像度に関する用語について、説明しておきます。CSSピクセルメディアクエリのブレイクポイントにもなる、CSSで使うようなピクセルの単位のことを「CSSピクセル」と言います。(デバイスピクセルと表記されている場合もあります。〇〇px)」というような記述をするかと思いますが、この時の「〇〇px」が「CSSピクセル」です。667px」の方が「CSSピクセル」です。説明のため、「画面解像度」や「デバイスピクセル比」という用語も出しましたが、今回のメモではこれらの意味を理解しておく必要は特にありません。dp解像度Android端末は少し特殊な解像度の仕組みがあるようで、CSSピクセルに該当するのが「dp解像度」と呼ばれるものらしいです。dp解像度についての詳細はとりあえず置いといて、Android端末でメディアクエリの指定に使うピクセルは「dp解像度」を見ればいいということをまずは知って置いてください。iPhone・iPadのブレイクポイント一覧iPhoneやiPadについてはよくご存知な方も多いと思いますが、一応まとめておきます。他の解像度が混ざっているとややこしいので、メディアクエリで使うCSSピクセル幅だけを表記することとします。1366Android端末のブレイクポイントについてAndroidは様々な種類の端末があります。これからもその数はかなり増えていくでしょう。メジャーな端末ではdp解像度は数パターンほどしかありません。いう記事によると、2016年に発売されたモバイル端末のほとんどが、dp解像度「360x640」のサイズになっています。このように、Android端末は数が多すぎるので、主な端末サイズを数パターンに分けて表にしておこうと思います。以下の記事を参考にしています。1280メディアクエリのブレイクポイントは結局何ピクセルなのかこれは、「そのサイトがどこまで細かく対応するのか」によると思います。そこで、どの程度までレスポンシブ対応するかによって、ブレイクポイントの設定をどうするのがよいのか、いくつかパターン分けしてみようと思います。モバイル・タブレット・縦横のざっくりとした区分けとりあえず、モバイルやタブレットのサイズがだいたいどれくらいの範囲に収まるのかをざっくりと整理してみて、これをもとにブレイクポイントの基準を決めていきたいと思います。私が考えた区分け時のポイントは以下。モバイル端末は現状、縦向き時の幅は480以下のものがほとんどiPhone5系やAndroidの小さいものは横向きの幅が500代タブレットは小さくても縦向きの幅600pxからと考えても良さそう。これをもとに、だいたい次のような区分けができるのではないでしょうか。1280pxフォントサイズについてモバイル(縦)でのフォントサイズは基本的にvwを使うものと仮定します。フォントサイズをpx/remで指定する人は、モバイル区域の中でさらに細かく分けていく必要があるかと思いますが、ここではフォントサイズのためだけのメディアクエリは考慮しないものとします。メディアクエリ区分け案パターン1:しっかりレスポンシブデスクトップのコンテンツの表示幅が1200pxのサイトの場合で考えてみます。だいたい以下の4区に分けるといい感じに区分けるのではないでしょうか。1199pxデスクトップ:1200px~iPhone4系は横向きでも「モバイル(縦)」の区分けに入りますが、iPhon4系はそろそろ考慮しなくて良いレベルかと思います。1199pxデスクトップ:1200px~「モバイル(縦)」と「タブレット(縦)」のブレイクポイントを500pxから600pxにずらしています。現在では「モバイル(縦)」は大きくても480pxまでですが、今後の事も考え、「タブレット(縦)」の600pxまで範囲を広げたパターンです。iPhone5系とAndroidのいくつかの端末では、横向きでも「モバイル(縦)」の区分けに入ってしまい、フォントサイズにvwを使っていると、テキストの情報量が少なくなります。これを妥協しても良い場合、または、フォントサイズがpx/rem指定の場合はこちらで特に問題ないかと思います。横向きのスタイルを調節してもいいですね。パターン3:タブレットはスクトップ表示(viewportでコンテンツ幅固定)タブレット端末はデスクトップ表示と同じでいい場合。タブレットの場合にviewportを1200pxに固定しておきます。899pxタブレット&デスクトップ:900px~パターン4:タブレット端末はデスクトップ表示・モバイル端末の横向きの可読性を妥協タブレットはデスクトップの表示と同じでいいし、モバイル端末は縦向きがしっかりしてればいいや、というサイトの場合。こちらも、タブレットの場合にviewportを1200pxに固定しておきます。899pxタブレット&デスクトップ:900px~メディアクエリについて実際のメディアクエリのコードを今回はあえて省きました。コピペばかりでメディアクエリを理解していない人がかなり多いんじゃないかと思いまして。そこで、メディアクエリについてかなり基本的なことから整理してみました。Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。Queries)について。基本的な書き方や記述の意味についてまとめていきます。@medeia...是非、こちらを参考にしてみてください。@ddryo_loosホームその他iOS・Android端末のCSSピクセル・dp解像度一覧。レスポンシブでメディアクエリのブレイクポイントは結局何ピクセルなのか?はどこまで対応するかで変わる。