CREATIVE X 第2弾
CREATIVE X 第2弾
2018.09.26
#164
それいけ!フロントエンド

幅変更でスタイル消失!?「メディアクエリ設定」の落とし穴

つっちー

こんにちは。フロントエンドエンジニアのつっちーです。

WebページにおけるPCとモバイルの表示変更は、最近ではレスポンシブデザインによって実現することが多いかと思います。かくいう私もレスポンシブデザインでの実装がほとんどなのですが、そんな中で「たまにだけ、スタイルが全く適用されない状態になる」という奇妙な現象に遭遇したことがあります。

苦闘の末に無事原因を突き止め、解決することができたので、記事にして記録しておこうと思います。

あるウインドウ幅でだけ消失するスタイル

一見問題のないレスポンシブなページ

まずは、その「たまにだけ、スタイルが全く適用されない」ページを見てみましょう。

このページです。

See the Pen mediaquery by ligdsktschy (@lig-dsktschy) on CodePen.

ウインドウ幅によって、背景色が赤と青で切り替わるように実装されています。

でもブラウザを拡大すると…

次に、「スタイルが全く適用されない」状態を確認してみましょう。

ページを別ウインドウ、もしくは別タブで開いたあと、以下の操作を行ってみてください。

  1. ブラウザの表示倍率を上げる
  2. ウインドウ幅をゆっくりと伸縮させ、背景色を切り替える

まず、ブラウザの表示倍率を上げ、110%、150%などに拡大します。
(Win: Controlキー + +キー、Mac: Commandキー + +キー)

その後、ゆっくりとウインドウ幅を伸縮させ、何度か背景色を切り替えてみてください。

背景色が、赤でも青でもなく、白に切り替わる場合があることに気づきましたでしょうか。background-colorの指定が適用されていないのです。

なぜスタイルが消失するのか?

これは、メディアクエリの指定方法が原因となって発生しています。

この例では、表示領域幅が767px以下である場合と、表示領域幅が768px以上である場合に対してスタイルを設定しています。

ですが、表示領域幅が767pxより大きく、768pxより小さい場合に対してはスタイルが設定されていません。

See the Pen mediaquery by ligdsktschy (@lig-dsktschy) on CodePen.

ウインドウの表示倍率が100%であれば、767pxの次に大きい表示領域幅は768pxですが、100%より大きい場合は、767.XXpxといった小数を持つ表示領域幅が発生してしまいます。

その結果、この例では下記のような挙動となります。

表示倍率が110%の場合、ウインドウ幅844pxでスタイルが適用されない。

ウインドウ幅 843px ÷ 表示倍率 1.1 = 表示領域幅 766.3636…px → 背景色:赤
ウインドウ幅 844px ÷ 表示倍率 1.1 = 表示領域幅 767.2727…px → 背景色:なし
ウインドウ幅 845px ÷ 表示倍率 1.1 = 表示領域幅 768.1818…px → 背景色:青

表示倍率が150%の場合、ウインドウ幅1151pxでスタイルが適用されない。

ウインドウ幅 1150px ÷ 表示倍率 1.5 = 表示領域幅 766.6666…px → 背景色:赤
ウインドウ幅 1151px ÷ 表示倍率 1.5 = 表示領域幅 767.3333…px → 背景色:なし
ウインドウ幅 1152px ÷ 表示倍率 1.5 = 表示領域幅 768px → 背景色:青

対策

この挙動を防ぐための対策は2通りあります。

1.メディアクエリの設定をmin-widthかmax-widthに統一する

メディアクエリの設定をmin-widthかmax-widthに統一することで、スタイルが適用されない表示領域幅をなくすことができます。

ただし、この場合は複数のメディアクエリにマッチする表示領域幅が発生するため、注意が必要です。

See the Pen mediaquery-solution-1 by ligdsktschy (@lig-dsktschy) on CodePen.

2.メディアクエリの設定にも小数を利用する

メディアクエリの設定にも小数を利用することで、スタイルが適用されない表示領域幅を実質的になくすことができます。

この方法であればmin-widthとmax-widthの混在が可能ですが、個人的には少し無理矢理感を感じます。

See the Pen mediaquery-solution-2 by ligdsktschy (@lig-dsktschy) on CodePen.

まとめ

実際に私がこの挙動に気づいたように、ブラウザの表示倍率を大きく設定しているユーザーは意外と多く存在するのだと思います。

細かい部分ではありますが、少しでも完璧な状態で見てもらいたいので、注意していきたいですね。ではまた! つっちーでした。