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

つっちー

2018.09.26

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

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

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

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

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

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

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

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

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

まず、ブラウザの表示倍率を上げ、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 → 背景色:青