resolution media query (compatibility prefixes)

概要

-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratioは、ディスプレイの解像度を検出するWebKit由来のメディアクエリです。標準のresolutionメディアクエリと互換性のあるエイリアスとして全主要ブラウザでサポートされています。高解像度ディスプレイ向けの画像切り替えなどで広く使用されてきた歴史的な記法です。

対応ブラウザ

基本構文

@media (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

実務での使いどころ

• 高解像度ディスプレイ対応

  Retinaディスプレイなどの高解像度デバイスで、高精細な画像リソースを提供します。

注意点

アクセシビリティ

• 高解像度画像の提供は視覚的品質向上に寄与しますが、代替テキストの提供を忘れないでください。

参考リンク

• MDN Web Docs — resolution media query (compatibility prefixes)