mediaQuery における max-width, max-device-width の違い

最近改めて使い分けないとなーと実感したので、その実感を忘れないうちにメモしておこうと思います。

デバイスの幅(width)と device-width の違いについて

そもそもの話ですが、そのデバイスで何ピクセル x 何ピクセルで表示できますよーという値と、 device-width の値は異なります。（結果的に同じ場合もあり得ますが）

http://screensiz.es/

こちらに、デバイスごとの width, device-width がまとめてあります。たまに見ます。

iPhone 3GS の時代であれば、width = 320px, device-width = 320px であったので問題なかったのですが、 retina ディスプレイが出てきてから、 width = 640px, device-width = 320px になってきています。

それならまだ 1:2 になるので分かりやすくて良かったのですが、 そうではない多種多様なデバイスが世に出回っています。

例えば Surface Pro は、1920 x 1200px で device-width = 1280px であったり、 Nexus7 は、800 x 1280px で device-width = 601px であったり、 さらに Nexus7 の例のように、アップデートで device-width は変化したりもします。

一緒に作ってる人と話すときにそのあたりの認識が異なる場合がそこそこあるのですが、 device-width は、あくまでそのデバイスを提供している側が、見せたい側の都合の良いサイズを決めているだけにすぎないもので、 width と device-width に依存関係はないと考えています。

タブレット周りは特にそれが顕著で、サイズ的にも『PCレイアウトで見せたい！』というデバイスの開発側の意図により、 PCレイアウトに近くなるような device-width が決められています。 （768px であったり、1024px であったり・・・）

そもそも device-width がどっちの辺を指すのか？も、デバイスの開発側の意図によるもので、 デバイスによって様々です。大変ですね。

なので、「必ずこの端末は意図した通りのデザインで見せたい！」とか、 「アプリとしてリリースするけど、この部分はWebViewでー」とか、そういったケースで viewport のメタタグに device-width が設定してある場合などは、 （当たり前とは思いつつも）きちんとチーム内で作る対象のサイズを共有しなければと思っているところです。

max-width と max-device-width の違い

こちらが本題です。

CSS の mediaQuery で幅に応じてスタイルの出し分けを行ったりするケースで使うのですが、

@media only screen and (max-width: 480px) {

とか、

@media only screen and (max-device-width: 480px) {

などのように使います。

max-width と max-device-width はどのような違いがあるかというと、 表示領域の幅なのか、そのデバイスそのものの幅なのかの違いがあります。

例えば以下のケースで、違いが顕著になってくると思います。

1. スマートフォンレイアウトの検証を、簡易的にWebブラウザのウィンドウ幅を変えることで検証を行っている場合
2. スマートフォンなどのモバイルデバイスを縦横に傾けた場合

max-width などの表示領域の幅で指定がしてあった場合、 1.のケースでは例えば開発者ツールを開きながらの検証が非常にスムーズであると思います。 これは表示領域の幅で切り替えており、ウィンドウサイズを変えることでこちらの数値が変わるためにスタイルのあたり方が変化することによるものです。

また、2.のケースでは、仮にしきい値が 480px にしてあった場合、iPhone5 などを縦から横に傾けた場合、 表示領域の幅が 320px から 568px に変化することにより、スタイルのあたり方は同様に変化します。

max-device-width などのデバイスそのものの幅で指定がしてあった場合、 1.のケースでウィンドウサイズを変化させただけでは表示の変化はしません。 この場合は開発者ツールなどでデバイスのサイズ（device metrics）を上書きしてやる必要が出てくると思います。

また、2.のケースでは、一部のデバイスを除き（どれまでかは細かく知らないです）、 デバイスごとに、device-widthを「Webコンテンツをこの幅で見せたいんだ！」と開発側が決めているため、 縦横に傾けてもこの数値は変わらず、上記の mediaQuery 指定でスタイルが変化することはありません。

こういった違いがあるため、作っているものによって使い分ける必要があるのではないかと思います。

例えばレスポンシブレイアウトなど

例えばレスポンシブレイアウトなどで、大きく 480px あたりでPC用リソース、スマートフォン用リソースを出し分けていると仮定します。

max-width で指定してあった場合に、480px の幅を下回るデバイスで閲覧し、横に傾けて 480px を上回るケースでは、 傾けた時点で表示領域・幅が変化することになるため、 適用されるスタイルが大きく変わります。

PC用、スマートフォン用とでリソースを多く出し分けていたとしたら、傾けた時点で多くのリソースの読み込みが発生してしまうことになります。大変なことですね。

どちらが良いとか決めうちで決められるものではないので、作っているものによってこのあたりの違いを踏まえて毎回適切な実装方法を考えていかないといけないなーと、改めて実感したところです。