CSS メディアクエリ（@media）ブレイクポイント受難
レスポンシブWebデザイン崩壊！？

あくまでも自社用として、必要なことだけのまとめ

検索しても、スバリの情報がなかなか見つからない。また、いろいろ惑わされて、現場が騒がしい

弊社も、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ

パソコンにつないだフルHD（1920×1080）モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている

なお、PCファーストという表示は、Apple信者には腹立たしいかもしれないがMacも含まれ、またデスクトップファーストとも呼ばれている。
ノートパソコンであっても、デスクトップと一括される（笑）

メディアクエリ混乱 ブレイクポイント迷走 レスポンシブ崩壊

自サイトも、iPhoneであれこれ眺めてみると、ときおり崩れていることが多い

さらに、Mac XcodeのiOSシミュレーターや、ブラウザーのレスポンシブ表示確認でも、えらいことになっている…

メインサイトの algorism.co.jp もリニューアルして、社内用として、現時点での方向性を決めておきたい

レスポンシブ メディアクエリ 簡易版

面倒臭いので、簡易版のメディアクエリを採用したい

iPhone 14 および iPad Pro 12.9/11対応

iPhoneだけでも、2018年からは、大ごとになっている

新レスポンシブ：スマホ縦（max-width: 480px）からのみ

こうなったら居直って、ほんとうの簡易版としては、スマホ縦画面に合わせただけのメディアクエリ・ブレイクポイントでもいいかもしれない

@media screen and (max-width: 480px) { }

スマートフォンのシェアが増え、かつほとんどが縦画面で見ていると想定するなら、これが落ち着きどころと言える
小画面スマホなら、横も480pxでおさまりそう

もとより、タブレットはパソコンと同じでもよかった
さらに、今では大画面のスマートフォンでは、横向きではタブレットつまりパソコンと同じでもかまわないとみなせる

スマホ横までは、同じCSSでまかなえることが、理想だろう

スマホ縦では、複数ブロックの横並びを縦並びに変えるという作為が必要になる

タブレットは、横はパソコンと同じ、縦が悩ましいが

.container { max-width: 1024px; }

PCファーストにしているから苦労するだけで、bodyの中にidやclassでcontainerなりcontentsなりのdivを入れているテンプレートが多いので、横幅最高1024pxにしておけば、
タブレット縦も、スマホ横も、ほぼ同じCSSで済ませることができるはずだ

新レスポンシブ：タブレット縦/スマホ横/スマホ縦

今、いろいろなサイトで、大画面デバイス対応を模索しているが、落ち着きどころとしては、
既存のメディアクエリ・ブレイクポイントにも左右されるので、パソコン（タブレット横）/タブレット縦/スマホ横/スマホ縦 で振り分ける案に固まりつつある

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 928px) { }
@media screen and (max-width: 480px) { }

上述のように、「.container { max-width:1024px; }」にしておけば、タブレット縦やスマホ横のCSS記述は、圧倒的に少なくなるはず

.container { max-width: 1024; }

あとは、モバイルファースト（ないしモバイルオンリー）というポリシーで、パソコンなどの表示で少しくらいデザインが気に入らないとか、損切りする覚悟で行こう！

2022年10月17日追記
レスポンシブ メディアクエリ・ブレイクポイント 詳細版（iOS / Android）

なまじデバイスを複数そろえていると、つい確認したくなる。
確認すると、細かいところが気になってしかたないことが多い。

追記：iOS（ほぼ網羅）とAndroid（こちらはピックアップ）

iPhone 機種別画面サイズ CSSピクセル一覧　

iPad 機種別画面サイズ CSSピクセル一覧

Android 機種別画面サイズ CSSピクセル一覧

メディアクエリ混乱 ブレイクポイント迷走 レスポンシブ崩壊

かつては、余裕があるときは、複数のスマホ、縦や横の画面でも見栄えをよくすることがあった。
が、今や余裕はなくなってきた…

レアなメディアクエリ・ブレイクポイント：デバイスの縦や横、CSSファイルそのもの

レアな情報としては、デバイスの縦や横で提供されるブレイクポイントの書き方もある。

@media screen and (orientation: portrait) {/* 縦向き */}
@media screen and (orientation: landscape) {/* 横向き */}

あるいは、CSS内ではなく、川上というかhead要素でメディアクエリをやる方法もある。

<link rel="stylesheet" href="sp.css" media="screen and (max-width: 480px)">

1枚のCSSよりも、デバイスごとの表示も安定し、サイト運営側の生産性が高まる可能性もある

orientation:portrait または landscape 注意点

たとえば、上記の「パソコン（タブレット横）/タブレット縦/スマホ横/スマホ縦」のつもりで、次のようなメディアクエリ・ブレイクポイントを設定すると

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 928px) and (orientation: landscape) { }
@media screen and (max-width: 480px) { }

スマホ横の928px以下での設定は、スマホ縦の480px以下には、継承されない（厳密に検証したわけではないが…）
また、タブレット縦の928px以下は、その上の1024px以下の設定が継続

よって、
スマホ縦の480px以下で、必要なものを重複して記述
タブレット縦の896px以下でも、特別に設定したいことがあれば、

@media screen and (max-width: 928px) and (min-width: 481px) and (orientation: portrait) { }

あほらしいが、このように別途ブレイクポイント設定が必要となる

モバイルファーストのメディアクエリ・ブレイクポイントなら

Googleは、とにかく「モバイルファースト」を推奨、推進している

まったく体感できていないが、
モバイルファーストのCSSメディアクエリでは、スマホでの表示が速くなると強調されている

とりあえず、モバイルファーストのブレイクポイントの書き方もさらっと書いておこう

モバイルファーストのメディアクエリ・ブレイクポイント 簡易版

モバイルファーストでは、まず、全デバイスで共通のCSSを書いておいてから、横画面の小さいものから記述していく

メディアクエリなし 【スマートフォン縦】
@media screen and (min-width: 481px) { } 【スマートフォン横】
@media screen and (min-width: 929px) { } 【タブレット縦以上】

また、最大を示す「max-width」でななく、最少の「min-width」を指定する

さらには、最小と最大を厳密に指定する書き方もある

@media screen and (min-width: 481px) and (max-width: 768px) { }

いずれにせよ、設計が重要であり、複数が携わったり、担当者が変わったり、方向性が浸透しなければならない

モバイルファーストのメディアクエリ・ブレイクポイント 実践版

とにかく、モバイルファーストを徹底する。
スマホ縦を標準として、次にタブレット縦、最後にPC（デスクトップ/タブレット横）と記述していく

もはや、レスポンシブと偽装しパソコンWebをスマホでも表示できる、というような戯言は止めるべき
結局は、デスクトップファーストに過ぎない

モバイルファーストとは、決定的な違いがある

ChromeのデベロッパーツールやFirefoxの開発ツール

GoogleのChromeのデベロッパーツール、ElementsでHTMLソース指定の箇所を選択すると、画面でも該当箇所がハイライトされ、Elementsの下のStylesで効いているCSS、ファイル名と行番号が表示される

これは、どれが問題なのか瞬時に分かって、非常にありがたい

デベロッパーツールは、Ctrl + Shift + I、それからCtrl + Shift + Mでレスポンシブ確認できる（Macなら、command + shift + ○）

Firefoxの開発ツールも、ほぼ同じである
こちらは、いきなりCtrl + Shift + Mでレスポンシブ確認できる
また日本語化されている

ChromeもFirefoxも、ユーザーエージェントも同時に切り替わるので、実機と同じような確認ができそう

WordPressで記事を投稿するときは、公開前にプレビューを、デベロッパーツールなどで確認する。

なお、実機とは違った表示のときもあるので、注意
パソコンのChromeやFirefox（あるいはMacのSafari）のレスポンシブ確認と、iPhone/iPadのSafariとは、同じではないので

ブラウザーのモバイル表示確認

Operaや新しいWindows10のEdgeなどは、ChromeのBlinkレンダリングエンジンを採用していて、デベロッパーツールもほぼ同じ

ところが、ほぼ同じであっても、まったく同じでないところが、もどかしい

さらに、FirefoxもiOS系はいいのだが、Android系は表示がおかしい

ということで、モバイル表示確認は、Google Chromeの一択ということになりそう

LighthouseはNexus 5

Chromeの拡張機能、Lighthouseでスコアチェックする場合、ファーストビューを意識するのであれば、モバイル表示確認は Nexus 5 もしくは Nexus 5X にしておくといいと思われる