• SEOブログ

    スマホサイトWeb WordPressなどのSEO
    小画面 少コンテンツ 省テキスト 多画像対応の
    コーディング実験検証

  • SEOブログ

【2022年10月最新版】レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ

レスポンシブ CSS メディアクエリ ブレイクポイントまとめ
メディアクエリ・ブレイクポイントもCSS次第ではあるが、iPhoneなどの大型スマホ、さらにはiPadの大型タブレットの登場で、レスポンシブは壊滅状態。iPhone、iPad、Android 機種別画面サイズ CSSピクセル一覧 2022年10月最新版

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年からは、大ごとになっている

iPhone XS Max/XR および iPad Pro 12.9/11 対応
タブレット 横はパソコンと同じ
タブレット 縦のみ@media screen and (max-width: 1024px) and (orientation: portrait)
タブレット 縦から@media screen and (max-width: 1024px)
スマホ 横のみ@media screen and (max-width: 928px) and (orientation: landscape)
スマホ 横から@media screen and (max-width: 928px)
スマホ 縦からは@media screen and (max-width: 480px)

※2022年10月17日現在、iPhone 14に合わせて、スマホ横は「928px」としている

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

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

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

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

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

すべての横幅サイズを相対値(% em あるいは rem)などで設定するなら、最低限のスマホ横のみで間に合うはずだ

スマホ横までは、同じ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ピクセル一覧 

2022年10月版(iPhone 14*まで)
デバイス「横」の画面幅「縦」の画面幅
iPhone 14 Pro Max928px428px
iPhone 14 Plus/13 Pro MAX/12 Pro MAX926px428px
iPhone 14 Pro/14/13 Pro/13/12 Pro/12844px390px
iPhone 12 mini780px360px
iPhone 11/11 Pro Max/XS Max/XR896px414px
iPhone 13 mini/11 Pro/XS/X812px375px
iPhone 8/7/6s/6 Plus736px414px
iPhone 8/7/6s/6/SE(2nd/3rd gen)667px375px
iPhone 5s/5/SE568px320px
iPhone 4(以下)480px320px

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

2022年10月版
デバイス「横」の画面幅「縦」の画面幅
iPad Pro(12.9inch)1366px1024px
iPad Pro(11inch) 1194px834px
iPad Pro(10.5inch)/iPad Air(3)1112px834px
iPad Air(4 5)1180px820px
iPad(7 8 9)1080px810px
iPad /iPad mini(1~5)1024px768px
iPad mini(6)1133px744px

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

2022年10月版(Androidタブレット/スマートフォン)
デバイス「横」の画面幅「縦」の画面幅
Kindle Fire HDX / Nexus 101280px800px
Pixel 2 XL823px411px
Pixel 2731px411px
Nexus 5X/6/6P732px412px
XPERIA 12976px 418px 
Nexus 5 / XPERIA640px360px

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

スマートフォン デバイスが変化し続けるため、iPhone XS Max/XRのように想定外のスマホ画面になっているので、画面の横幅(max-width)だけのメディアクエリ・ブレイクポイントでは、既存の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(デスクトップ/タブレット横)と記述していく

全デバイス/画面サイズに共通
かつ 480:スマートフォン縦
デフォルト
タブレット縦 /スマートフォン横@media screen and (min-width: 481px)
デスクトップ/タブレット横@media screen and (min-width: 769px)

もはや、レスポンシブと偽装しパソコン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 にしておくといいと思われる

«
»