Media Queries: resolution feature
Media Queries: resolution feature
Allows 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.
| Spec | http://www.w3.org/TR/css3-mediaqueries/#resolution |
|---|---|
| Status | W3C Recommendation |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 | 62 | ||||
| 56 | 61 | TP (3,*) | 48 | ||
| 16 | 55 | 60 | 11 (3,*) | 47 | |
| 11 (1) | 15 | 54 | 59 | 10.1 (3,*) | 46 |
| 10 (1) | 14 | 53 | 58 | 10 (3,*) | 45 |
| 9 (1) | 13 | 52 | 57 | 9.1 (3,*) | 44 |
| 8 | 12 | 51 | 56 | 9 (3,*) | 43 |
| Show all | |||||
| 7 | 50 | 55 | 8 (3,*) | 42 | |
| 6 | 49 | 54 | 7.1 (3,*) | 41 | |
| 5.5 | 48 | 53 | 7 (3,*) | 40 | |
| 47 | 52 | 6.1 (3,*) | 39 | ||
| 46 | 51 | 6 (3,*) | 38 | ||
| 45 | 50 | 5.1 (3,*) | 37 | ||
| 44 | 49 | 5 (3,*) | 36 | ||
| 43 | 48 | 4 (3,*) | 35 | ||
| 42 | 47 | 3.2 | 34 | ||
| 41 | 46 | 3.1 | 33 | ||
| 40 | 45 | 32 | |||
| 39 | 44 | 31 | |||
| 38 | 43 | 30 | |||
| 37 | 42 | 29 | |||
| 36 | 41 | 28 | |||
| 35 | 40 | 27 | |||
| 34 | 39 | 26 | |||
| 33 | 38 | 25 | |||
| 32 | 37 | 24 | |||
| 31 | 36 | 23 | |||
| 30 | 35 | 22 | |||
| 29 | 34 | 21 | |||
| 28 | 33 | 20 | |||
| 27 | 32 | 19 | |||
| 26 | 31 | 18 | |||
| 25 | 30 | 17 | |||
| 24 | 29 | 16 | |||
| 23 | 28 (3,*) | 15 | |||
| 22 | 27 (3,*) | 12.1 | |||
| 21 | 26 (3,*) | 12 (3,*) | |||
| 20 | 25 (3,*) | 11.6 (3,*) | |||
| 19 | 24 (3,*) | 11.5 (3,*) | |||
| 18 | 23 (3,*) | 11.1 (3,*) | |||
| 17 | 22 (3,*) | 11 (3,*) | |||
| 16 | 21 (3,*) | 10.6 (3,*) | |||
| 15 (2) | 20 (3,*) | 10.5 (3,*) | |||
| 14 (2) | 19 (3,*) | 10.0-10.1 (3,*) | |||
| 13 (2) | 18 (3,*) | 9.5-9.6 (3,*) | |||
| 12 (2) | 17 (3,*) | 9 | |||
| 11 (2) | 16 (3,*) | ||||
| 10 (2) | 15 (3,*) | ||||
| 9 (2) | 14 (3,*) | ||||
| 8 (2) | 13 (3,*) | ||||
| 7 (2) | 12 (3,*) | ||||
| 6 (2) | 11 (3,*) | ||||
| 5 (2) | 10 (3,*) | ||||
| 4 (2) | 9 (3,*) | ||||
| 3.6 (2) | 8 (3,*) | ||||
| 3.5 (2) | 7 (3,*) | ||||
| 3 | 6 (3,*) | ||||
| 2 | 5 (3,*) | ||||
| 4 (3,*) | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 (3,*) | |||||||||||
| 10.3 (3,*) | all (1) | 56 | 10 (3,*) | 37 | 59 | 54 | 11 (1) | 11.4 | 5 | 1.2 | 7.12 |
| 10.0-10.2 (3,*) | 4.4.3-4.4.4 | 7 (3,*) | 12.1 | 10 (1) | 4 | ||||||
| 9.3 (3,*) | 4.4 | 12 (3,*) | |||||||||
| 9.0-9.2 (3,*) | 4.2-4.3 (3,*) | 11.5 (3,*) | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (3,*) | 4.1 (3,*) | 11.1 (3,*) | |||||||||
| 8 (3,*) | 4 (3,*) | 11 (3,*) | |||||||||
| 7.0-7.1 (3,*) | 3 (3,*) | 10 (3,*) | |||||||||
| 6.0-6.1 (3,*) | 2.3 (3,*) | ||||||||||
| 5.0-5.1 (3,*) | 2.2 | ||||||||||
| 4.2-4.3 (3,*) | 2.1 | ||||||||||
| 4.0-4.1 (3,*) | |||||||||||
| 3.2 | |||||||||||
Notes
Supports the
dpiunit, but does not supportdppxordpcmunits.Firefox before 16 supports only
dpiunit, but you can set2dppxpermin--moz-device-pixel-ratio: 2Supports the non-standard
min/max-device-pixel-ratio
- * Partial support with prefix.
Bugs
Microsoft Edge has a bug where
min-resolutionless than1dpcmis ignored.
Resources
- How to unprefix -webkit-device-pixel-ratio
- WebKit Bug 78087: Implement the 'resolution' media query
- WHATWG Compatibility Standard: -webkit-device-pixel-ratio
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-media-resolution
