CSSのメディアクエリで解像度による分岐を行う

しばらく見ていなかったせいで情報を発見するのが遅れてしまったのでメモ的に残します(間違ってたらごめんなさい)。

なおあくまで記事執筆時点の内容です。廃止や変更の可能性は常にありますから参考となる公式(のような?)サイトを都度確認する方が良いです。

解像度(出力デバイスのピクセル密度)によるメディアクエリの書き方(現実?)

後述する趣旨と矛盾しますが、iPhoneのsafariなどではresolutionが効かずに-webkit-device-pixel-ratioだけが効く状況があります。

こうなりますと非推奨であれ使わざるを得ず、実際には以下のように併記することになりそうです。

/* カンマ区切りで併記可能 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) { ... }

解像度(出力デバイスのピクセル密度)によるメディアクエリの書き方(理想?)

MDNの以下のページを参考に記述します。

• <resolution> | MDN

@media screen and (min-resolution: 2dppx) { ... }

dppxの意味は以下の通り。

ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは image-resolution で定義される、CSS の画像のデフォルトの解像度に一致します。

この説明に基づくと、96dpiと書いても1ddpxと書いても同じだということになります。そのため2ddpxと書かずとも192dpiと書いても構いません。

古いブラウザに対応する場合はdpiやddpの方しか効かない可能性もありますが、前出のMDNのページで対応範囲を見るとあまり気にしなくともよいかもしれません(どこから切り捨てるのかによりますが)。

-webkit-device-pixel-ratio

実はこちらが本題です。検索で解像度による出し分け方法を探すと以下のような記述が見つかるとことが多いと思います。
実際に私自身も使っていましたし、意図した動作になっていることも実機などで確認していました。

@media (-webkit-min-device-pixel-ratio: 2) { ... }

が、先日以下のページで記述を見つけました。いつこの記述があったのかわかりませんが、このページの最終更新日は2018/07/27 9:34:50となっていたので少なくともそれ以前ということになります(最初からだったのかもしれません…)。

• -webkit-device-pixel-ratio | MDN

この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

メモ: このメディア特性は WebKit の機能です。可能であれば、代わりに resolution メディア特性クエリを使用してください。

最初にこのページを見た時には少なくともこれほど強い感じではなかったと思うですが、明確に覚えているわけではないので微妙です。

ともかく、前項のresolutionの使用が推奨されていました。

結び

ベンダープレフィックスがついた方法を使う時点でこういう事態は想定しているものですが、この件に関してはもう-webkit-min-device-pixel-ratioを使わない方が良い。…ということなのですが実際にはそうもいかない微妙な状況です。