Media Queries: resolution feature
- CRAllows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query.
Chrome
- 4 - 28: Partial support
- 29 - 67: Partial support
- 68 - 107: Supported
- 108: Supported
- 109 - 111: Supported
Edge
- 12 - 18: Partial support
- 79 - 106: Supported
- 107: Supported
Safari
- 3.1 - 3.2: Not supported
- 4 - 15.6: Partial support
- 16.0: Supported
- 16.1: Supported
- 16.2 - TP: Supported
Firefox
- 2 - 3: Not supported
- 3.5 - 15: Partial support
- 16 - 61: Partial support
- 62 - 106: Supported
- 107: Supported
- 108 - 109: Supported
Opera
- 9: Not supported
- 9.5 - 12: Partial support
- 12.1: Supported
- 15 - 54: Partial support
- 55 - 91: Supported
- 92: Supported
IE
- 5.5 - 8: Not supported
- 9 - 10: Partial support
- 11: Partial support
Chrome for Android
- 107: Supported
Safari on iOS
- 3.2: Support unknown
- 4 - 15.6: Partial support
- 16.0: Supported
- 16.1: Supported
Samsung Internet
- 4 - 9.2: Partial support
- 10.1 - 18.0: Supported
- 19.0: Supported
Opera Mini
- all: Partial support
Opera Mobile
- 10 - 12: Partial support
- 12.1: Supported
- 72: Supported
UC Browser for Android
- 13.4: Supported
Android Browser
- 2.1 - 2.2: Support unknown
- 2.3 - 4.3: Partial support
- 4.4 - 4.4.4: Partial support
- 107: Supported
Firefox for Android
- 106: Supported
QQ Browser
- 13.1: Supported
Baidu Browser
- 13.18: Supported
KaiOS Browser
- 2.5: Supported
- Resources:
- WebKit Bug 78087: Implement the 'resolution' media query
- Firefox support 'x' as a resolution unit.
- Chrome support 'x' as a resolution unit.
- WHATWG Compatibility Standard: -webkit-device-pixel-ratio
- MDN Web Docs - CSS @media resolution
- CSS Values and Units Module Level 4 add the `x` unit as an alias for `dppx`.
- How to unprefix -webkit-device-pixel-ratio