cssのメディアクエリにmin-device-widthやmax-device-widthが指定されていた時の注意点

はじめに

今回は実務経験であった「cssのメディアクエリにmin-device-widthやmax-device-widthが指定されていた時の注意点」についてご紹介します。

min-device-widthやmax-device-widthの使い方の例

下記はデバイスの幅が768px以上かつ1024px以下の場合にスタイルを適用するための条件で、タブレット実機で見た場合のメディアクエリになります。

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .main-img img {
        height: 600px;
    }
}

PR

上記cssを指定した場合の画像の表示確認

min-device-widthやmax-device-widthを指定していない場合の表示確認

min-device-widthやmax-device-widthが指定されていた時の注意点

min-device-widthやmax-device-widthが指定されていた時の注意点は「実機で確認する必要がある」ということです。

以下は、PCのChromeで検証ツールを使用して画面幅を820px（iPad Airの画面幅）にしたときの画像です。

PCで確認した場合は、下記画像内の2枚の画像は同じ表示がされています。

では下記画像の赤丸の部分をクリックして、サイズを「iPad Air」に変更します。

一目瞭然ですね。

画像内の上側の画像にはcssにメディアクエリのmin-device-widthやmax-device-widthが指定されているため、画像が上下に伸びてしまっているのが確認できます。

つまり、min-device-widthやmax-device-widthが指定されているときは、PCの検証ツールで横幅を狭くするだけではレイアウトが崩れていることがわからないということです。

ただ、タブレットの実機を持っていないという方もいらっしゃると思います。タブレットの実機は持っていないという方でも、上記画像の赤丸の部分をクリックし、実機を選択することで表示の確認をすることができます。なのでサイトコーディングをされる方はぜひ覚えておいてほしいです。

device-widthの使用は非推奨

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

引用：https://developer.mozilla.org/ja/docs/Web/CSS/@media/device-width

非推奨とはあるものの、WordPressの有料テーマやECサイト作成のASPなどのデフォルトのcssにdevice-widthは存在している可能性があります。なのでもし出てきた場合は注意してください。

まとめ

cssのメディアクエリでmin-device-widthやmax-device-widthが指定されているときはPCの検証ツールで横幅を狭くして確認するだけでは、レイアウトが崩れているのはわからない。

タブレット実機がなかったとしても、PCの検証ツールで実機を選択することで実機の確認をすることができる。