2016-10-23

max-width、max-device-widthの違い

はじめに

レスポンシブデザインを勉強していると、CSSのメディアクエリの事を見聞きすると思います。メディアクエリでは画面幅に応じてサイトのコンテンツが可変するように設定することが出来、画面幅の指定には私の知る限りmax(min)-widthとmax(min)-device-widthという2種類が存在します。今回はこれらの違いについて、調べた事を書いていきます。

deviceの有無の違い

見ての通り、この2つの違いは名前にdeviceが付くか付かないかの違いです。では、deviceの有無によって何が違うのかというと、以下の点が挙げられます。

  • max(min)-device-widthは画面を表示するデバイスの画面幅を見る
  • max(min)-widthは表示に使用するブラウザの画面幅を見る

このように、名前の通りの働きをします。画面を表示するデバイスとはPCやスマートフォンの事で、こちらの設定を用いると、例えばPCでブラウザを小窓にして画面の表示幅が狭まったとしても、PCやスマートフォン自体の画面幅は狭まらないのでメディアクエリは動作しません。逆にdeviceが付かないと、ブラウザを小窓にしたとき、それに合わせてメディアクエリが動作します。

deviceが付かない方の注意点としては、デバイス自体の幅を変えた場合メディアクエリが動作しない点です。これはchromeのデベロッパーツールでレスポンシブの確認をする時などに注意する点で、デベロッパーツールではデバイス自体の画面幅を仮想的に可変させているようなので、これを知らないと、デベロッパーツールで確認しても、なぜかメディアクエリが動かない!という私のような事態に陥ります。

device-widthとの関係

また、HTML側ではviewportで画面幅を指定することが出来ます。ここにdevice-widthを設定すると、画面幅を表示するデバイスの表示域に合わせるといった設定になりますが、これを合わせて指定する事で、max(min)-width指定でもブラウザ幅、デバイス幅の両方でメディアクエリが動作するようになります。

ここまで紹介したものを組み合わせて動作させると、以下のような動きになります。

  • max-width            → ブラウザ幅のみレスポンシブ
  • max-device-width        → デバイス幅のみレスポンシブ
  • device-width+max-width     → デバイス幅でもブラウザ幅でもレスポンシブ
  • device-width+max-device-width → デバイス幅でのみレスポンシブ

さいごに

最近まで、device-width+max-widthとすることでのみレスポンシブ表示が可能だと思っていました。また、ブラウザ幅に合わせるか、画面幅に合わせるかという概念があることも知らなかったので、もしかしたら他にも適切な設定があるのかもしれません。コンテンツのレスポンシブ対応だけでも考えることが色々ありますが、この辺も考えるとなると、自分が思っているより奥深いもののようです。



コメントする(※は必須項目です)













画像認証