メディアクエリ:解像度機能

- CR

CSS単位あたりに使用されるデバイスピクセルに基づいてメディアクエリを設定できます。標準ではこれに対してmin/max-resolutionを使用しますが、一部のブラウザでは古い非標準のdevice-pixel-ratioメディアクエリをサポートしています。

Chrome

  1. 4 - 28:部分的にサポート
  2. 29 - 67:部分的にサポート
  3. 68 - 123:サポート
  4. 124:サポート
  5. 125 - 127:サポート

Edge

  1. 12 - 18:部分的にサポート
  2. 79 - 123:サポート
  3. 124:サポート

Safari

  1. 3.1 - 3.2:サポートなし
  2. 4 - 15.6:部分的にサポート
  3. 16.0 - 17.3:サポート
  4. 17.4:サポート
  5. 17.5 - TP:サポート

Firefox

  1. 2 - 3:サポートなし
  2. 3.5 - 15:部分的にサポート
  3. 16 - 61:部分的にサポート
  4. 62 - 124:サポート
  5. 125:サポート
  6. 126 - 128:サポート

Opera

  1. 9:サポートなし
  2. 9.5 - 12:部分的にサポート
  3. 12.1:サポート
  4. 15 - 54:部分的にサポート
  5. 55 - 108:サポート
  6. 109:サポート

IE

  1. 5.5 - 8:サポートなし
  2. 9 - 10:部分的にサポート
  3. 11:部分的にサポート

Chrome for Android

  1. 124:サポート

Safari on iOS

  1. 3.2:サポート不明
  2. 4 - 15.8:部分的にサポート
  3. 16.0 - 17.3:サポート
  4. 17.4:サポート
  5. 17.5:サポート

Samsung Internet

  1. 4 - 9.2:部分的にサポート
  2. 10.1 - 23:サポート
  3. 24:サポート

Opera Mini

  1. すべて:部分的にサポート

Opera Mobile

  1. 10 - 12:部分的にサポート
  2. 12.1:サポート
  3. 80:サポート

UC Browser for Android

  1. 15.5:サポート

Android ブラウザ

  1. 2.1 - 2.2:サポート不明
  2. 2.3 - 4.3:部分的にサポート
  3. 4.4 - 4.4.4:部分的にサポート
  4. 124:サポート

Firefox for Android

  1. 125:サポート

QQ Browser

  1. 14.9:サポート

Baidu Browser

  1. 13.52:サポート

KaiOS Browser

  1. 2.5:サポート
  2. 3:サポート
リソース
WebKitバグ78087:「resolution」メディアクエリの導入
Firefoxは解像度単位として「x」をサポート。
Chromeは解像度単位として「x」をサポート。
WHATWG互換性標準:-webkit-device-pixel-ratio
MDN Web Docs - CSS @media resolution
CSS Values and Units Module Level 4では、「x」単位が「dppx」のエイリアスとして追加されました。
-webkit-device-pixel-ratioのプレフィックスの削除方法