🐛あなたのCSSメディアクエリは間違っているかもしれない

みなさんはCSSのメディアクエリについて本当の意味で理解して使用しているでしょうか。ブラウザがデフォルトの状態なら正常に動くと思います。しかし、ブラウザで拡大率を変更したりするなどブラウザの設定によってはメディアクエリの解釈が大きく変わってきます。また、メディアクエリに使える単位のpxやem、remによっても変わってくるため、適切な単位を用いる必要があります。

検証に用いるCSS

以下の6パターンを使って検証します。すべてのバージョンを検証するのは大変なので、過去3年間のバージョンまで遡りました。

/* 600px以上 */
@media (min-width: 600px) { ... }
@media (min-width: 37.5em) { ... }
@media (min-width: 37.5rem) { ... }
/* 600px未満 */
@media not all and (min-width: 600px) { ... }
@media not all and (min-width: 37.5em) { ... }
@media not all and (min-width: 37.5rem) { ... }

想定されるパターン

メディアクエリに影響するパターンとして以下の3つが挙げられます。まずは、メディアクエリの単位にpxやem、remを指定した場合の正常な動作を再確認してみます。

ブラウザの拡大率変更

ブラウザの拡大率を変更してもメディアクエリのブレイクポイントは変化しない。

ブラウザの文字サイズ設定変更

remはブラウザの文字サイズ設定を基準とするため、設定を変更するとブレイクポイントは変化します。メディアクエリの場合はemも同様に変化します。例えば、ブラウザの文字サイズ設定を24pxにしたときを考えてみます。

/* 600px以上 */
@media (min-width: 37.5em) { ... }
@media (min-width: 37.5rem) { ... }

600px以上を表すメディアクエリは600 × (24 / 16) = 900pxがブレイクポイントとなります。pxは固定値であるため、ブラウザの文字サイズ設定によって変化はしません。

ルート要素の文字サイズ変更

ルート要素の文字サイズをCSSで2倍に指定しても、emやremはブラウザの文字サイズ設定を基準とするため、変化しません。pxは固定値であるため、そもそも影響しません。

ブラウザの拡大率変更

ブラウザの拡大率を200%にして検証してみました。

Internet Explorer

正常に動作しました。

Edge

正常に動作しました。

Firefox

正常に動作しました。

Chrome

Chrome77以降、ブラウザ幅600.5pxのとき、600px未満を表すメディアクエリが適用されないバグがあります。単位に関係なくpxとem、remのメディアクエリすべてで起きます。ブラウザ幅600.5pxってなんだと思うかもしれませんが、ブラウザの拡大率を2倍の200%にしているため、0.5pxきざみでブラウザ幅を変えられます。正しい動作ではなかったので、バグレポートを出しておきました。

Safari

emとremのメディアクエリが拡大率を掛けた値になるバグがあります。今回のように拡大率を200%とした場合、ブレイクポイントが600px × 2 = 1200pxとなってしまいます。また、600px以上を表すpx単位のメディアクエリがブラウザ幅599.5pxのときに適用されてしまうバグがあります。

Opera

OperaはChromeと同じエンジンを搭載しているので、Opera64以降Chromeと同じバグが起きます。

iOS Safari

iOS13からアドレスバーの左側あるAAボタンで拡大率を変更できますが、正常に動作しました。

Android

拡大率変更の設定はありません。

ブラウザの文字サイズ設定変更

ブラウザのデフォルト文字サイズを変更して検証してみました。

Internet Explorer

正常に動作しました。

Edge

文字サイズ変更の設定はありません。

Firefox

正常に動作しました。

Chrome

正常に動作しました。

Safari

[⌘Command] + [⌥Option] + [+キー]で文字を拡大を3段階行うとブラウザの文字サイズは27.648000717163086pxとなり、1.78倍になります。普通に考えるとemとremの600px以上を表すメディアクエリは600 × 1.78 = 1036.8px以上のブラウザ幅で適用されることになりますが、実際はブラウザ幅1036pxで適用されてしまいます。

Opera

正常に動作しました。

iOS Safari

文字サイズ変更の設定はありません。

Android

ブラウザの文字サイズ設定を変更してもメディアクエリのブレイクポイントは変わらず、文字だけが拡大縮小するようです。

ルート要素の文字サイズ変更

ルートであるhtml要素のfont-sizeを2倍にして検証してみました。

html {
  font-size: 2em;
}

Internet Explorer

正常に動作しました。

Edge

正常に動作しました。

Firefox

正常に動作しました。

Chrome

正常に動作しました。

Safari

remのメディアクエリが拡大率を掛けた値になるバグがあります。

Opera

正常に動作しました。

iOS Safari

remのメディアクエリが拡大率を掛けた値になるバグがあります。

Android

正常に動作しました。

メディアクエリの単位

ここまで各ブラウザの動作を検証してみましたが、ブラウザ間の違いが思ったよりもかなりあります。そこで、メディアクエリの単位に何を使うかを考えていきます。
まずはremですが、ルート要素の文字サイズを変更したときにSafariとiOS Safariだけバグがあるため、メディアクエリの単位にremは使いません。すると、pxかemになりますが、pxだとブラウザの文字サイズ設定が全く反映されないため、アクセシビリティを考えると好ましくありません。消去法になりますが、メディアクエリの単位にはemをおすすめします。
メディアクエリの単位にemを使う場合には、Webサイト全体のCSSでもpxを使わずにemやremなどの相対値を使用するようにしないと、ブラウザの文字サイズ設定を変更してもメディアクエリだけ変化することになってしまい意味がないので注意する必要があります。pxはborderなど、画面が拡大縮小しても固定値であってほしい箇所に使います。

バグの対処

検証結果を見る限り、致命的なバグはSafariだけだと思います。その他のブラウザで起きるブラウザ幅が小数点pxのときの挙動はおそらく浮動小数点関係だと思われます。このバグはブラウザに直してもらうしかないのと、1px未満の誤差なのでそこまで影響しないと思います。

ブラウザの拡大率ごとに指定

メディアクエリの単位にemを採用しましたが、先述した通りブラウザの拡大率を変更した際にSafariでメディアクエリが拡大率を掛けた値になる致命的なバグがあるため対応する必要があります。普通ならCSSハックで対処すると思いますが、実はmacOSのSafariだけ使えるCSSテクニックがあります。

ブラウザ幅(vw) = 100 / 拡大率 × 100

Safariではメディアクエリの単位にvwが使えます。例えば、拡大率125%の場合、ブラウザ幅は100 / 125 × 100 = 80vwとなります。

@media (width: 80vw) { ... }

つまり、このようにすると拡大率125%のときに適用されるCSSを書くことができます。Safariでは50・75・85・100・110・125・150・175・200・250・300%の拡大縮小ができるため、すべての場合を考えると以下のようになります。

/* Safari以外のブラウザ */
@media (min-width: 37.5em) { ... }

/* 拡大率50% */
@media (min-width: 199vw) and (max-width: 201vw) and (min-width: 75em) { ... }
/* 拡大率75% */
@media (min-width: 132vw) and (max-width: 134vw) and (min-width: 50em) { ... }
/* 拡大率85% */
@media (min-width: 116vw) and (max-width: 118vw) and (min-width: 44.11765em) { ... }
/* 拡大率115% */
@media (min-width: 86vw) and (max-width: 88vw) and (min-width: 32.6087em) { ... }
/* 拡大率125% */
@media (min-width: 79vw) and (max-width: 81vw) and (min-width: 30em) { ... }
/* 拡大率150% */
@media (min-width: 65vw) and (max-width: 67vw) and (min-width: 25em) { ... }
/* 拡大率175% */
@media (min-width: 56vw) and (max-width: 58vw) and (min-width: 21.42857em) { ... }
/* 拡大率200% */
@media (min-width: 49vw) and (max-width: 51vw) and (min-width: 18.75em) { ... }
/* 拡大率250% */
@media (min-width: 39vw) and (max-width: 41vw) and (min-width: 15em) { ... }
/* 拡大率300% */
@media (min-width: 32vw) and (max-width: 34vw) and (min-width: 12.5em) { ... }

拡大率の指定はブラウザ幅が小数点pxの場合を考慮して、±1vwとしています。また、拡大率を掛けた値になってしまうので、37.5 / 拡大率 × 100でメディアクエリが正しい値になるように戻しています。このようにすれば、ブラウザの拡大率変更と文字サイズ設定変更の両方に対応できます。

ブラウザの文字サイズ設定は無視

Safariの場合は[⌘Command] + [⌥Option] + [+キー]で文字を拡大できるのですが、通常はメニューバーに表示されていないため、あくまで想像ですがあまり使われていないと思います。文字の拡大縮小を無視すれば、CSSも簡潔になります。

/* Safari以外のブラウザ */
@media (min-width: 37.5em) { ... }

/* Safariの拡大縮小中 */
@media not all and (width: 100vw) {
  /* pxを使う */
  @media (min-width: 600px) { ... }
}

拡大率を変更中はメディアクエリの単位にpxを使う方法です。pxを使うため、ブラウザの文字サイズ設定は無視されてしまう点を除けば、とてもシンプルでよいと思います。

以下、有料となりますが、未満を表すメディアクエリはどう表すのが最適解なのか解説しています。いずれPostCSSプラグインを作って何も考えなくても対応できるようにしようと思っています。仕組みを理解したい方や応援してくださる方は購入してもらえると助かります。