メディアクエリ・ブレイクポイントもCSS次第ではあるが、iPhoneなどの大型スマホ、さらにはiPadの大型タブレットの登場で、レスポンシブは壊滅状態。iPhone、iPad、Android 機種別画面サイズ CSSピクセル一覧 2022年10月最新版
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
あくまでも自社用として、必要なことだけのまとめ
検索しても、スバリの情報がなかなか見つからない。また、いろいろ惑わされて、現場が騒がしい
弊社も、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ
パソコンにつないだフルHD(1920×1080)モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている
なお、PCファーストという表示は、Apple信者には腹立たしいかもしれないがMacも含まれ、またデスクトップファーストとも呼ばれている。
ノートパソコンであっても、デスクトップと一括される(笑)
自サイトも、iPhoneであれこれ眺めてみると、ときおり崩れていることが多い
さらに、Mac XcodeのiOSシミュレーターや、ブラウザーのレスポンシブ表示確認でも、えらいことになっている…
メインサイトの algorism.co.jp もリニューアルして、社内用として、現時点での方向性を決めておきたい
面倒臭いので、簡易版のメディアクエリを採用したい
iPhoneだけでも、2018年からは、大ごとになっている
タブレット 横は | パソコンと同じ |
---|---|
タブレット 縦のみ | @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」としている
こうなったら居直って、ほんとうの簡易版としては、スマホ縦画面に合わせただけのメディアクエリ・ブレイクポイントでもいいかもしれない
@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; }
あとは、モバイルファースト(ないしモバイルオンリー)というポリシーで、パソコンなどの表示で少しくらいデザインが気に入らないとか、損切りする覚悟で行こう!
なまじデバイスを複数そろえていると、つい確認したくなる。
確認すると、細かいところが気になってしかたないことが多い。
追記:iOS(ほぼ網羅)とAndroid(こちらはピックアップ)
デバイス | 「横」の画面幅 | 「縦」の画面幅 |
---|---|---|
iPhone 14 Pro Max | 928px | 428px |
iPhone 14 Plus/13 Pro MAX/12 Pro MAX | 926px | 428px |
iPhone 14 Pro/14/13 Pro/13/12 Pro/12 | 844px | 390px |
iPhone 12 mini | 780px | 360px |
iPhone 11/11 Pro Max/XS Max/XR | 896px | 414px |
iPhone 13 mini/11 Pro/XS/X | 812px | 375px |
iPhone 8/7/6s/6 Plus | 736px | 414px |
iPhone 8/7/6s/6/SE(2nd/3rd gen) | 667px | 375px |
iPhone 5s/5/SE | 568px | 320px |
iPhone 4(以下) | 480px | 320px |
デバイス | 「横」の画面幅 | 「縦」の画面幅 |
---|---|---|
iPad Pro(12.9inch) | 1366px | 1024px |
iPad Pro(11inch) | 1194px | 834px |
iPad Pro(10.5inch)/iPad Air(3) | 1112px | 834px |
iPad Air(4 5) | 1180px | 820px |
iPad(7 8 9) | 1080px | 810px |
iPad /iPad mini(1~5) | 1024px | 768px |
iPad mini(6) | 1133px | 744px |
デバイス | 「横」の画面幅 | 「縦」の画面幅 |
---|---|---|
Kindle Fire HDX / Nexus 10 | 1280px | 800px |
Pixel 2 XL | 823px | 411px |
Pixel 2 | 731px | 411px |
Nexus 5X/6/6P | 732px | 412px |
XPERIA 12 | 976px | 418px |
Nexus 5 / XPERIA | 640px | 360px |
スマートフォン デバイスが変化し続けるため、iPhone XS Max/XRのように想定外のスマホ画面になっているので、画面の横幅(max-width)だけのメディアクエリ・ブレイクポイントでは、既存の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よりも、デバイスごとの表示も安定し、サイト運営側の生産性が高まる可能性もある
たとえば、上記の「パソコン(タブレット横)/タブレット縦/スマホ横/スマホ縦」のつもりで、次のようなメディアクエリ・ブレイクポイントを設定すると
@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をスマホでも表示できる、というような戯言は止めるべき
結局は、デスクトップファーストに過ぎない
モバイルファーストとは、決定的な違いがある
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の一択ということになりそう
Chromeの拡張機能、Lighthouseでスコアチェックする場合、ファーストビューを意識するのであれば、モバイル表示確認は Nexus 5 もしくは Nexus 5X にしておくといいと思われる