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 | https://www.w3.org/TR/css3-mediaqueries/#resolution |
---|---|
Status | W3C Recommendation |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
73 | |||||
65 | 72 | ||||
64 | 71 | TP (3,*) | |||
11 (1) | 18 | 63 | 70 | 12 (3,*) | 56 |
10 (1) | 17 | 62 | 69 | 11.1 (3,*) | 55 |
9 (1) | 16 | 61 | 68 | 11 (3,*) | 54 |
8 | 15 | 60 | 67 | 10.1 (3,*) | 53 |
Show all | |||||
7 | 14 | 59 | 66 | 10 (3,*) | 52 |
6 | 13 | 58 | 65 | 9.1 (3,*) | 51 |
5.5 | 12 | 57 | 64 | 9 (3,*) | 50 |
56 | 63 | 8 (3,*) | 49 | ||
55 | 62 | 7.1 (3,*) | 48 | ||
54 | 61 | 7 (3,*) | 47 | ||
53 | 60 | 6.1 (3,*) | 46 | ||
52 | 59 | 6 (3,*) | 45 | ||
51 | 58 | 5.1 (3,*) | 44 | ||
50 | 57 | 5 (3,*) | 43 | ||
49 | 56 | 4 (3,*) | 42 | ||
48 | 55 | 3.2 | 41 | ||
47 | 54 | 3.1 | 40 | ||
46 | 53 | 39 | |||
45 | 52 | 38 | |||
44 | 51 | 37 | |||
43 | 50 | 36 | |||
42 | 49 | 35 | |||
41 | 48 | 34 | |||
40 | 47 | 33 | |||
39 | 46 | 32 | |||
38 | 45 | 31 | |||
37 | 44 | 30 | |||
36 | 43 | 29 | |||
35 | 42 | 28 | |||
34 | 41 | 27 | |||
33 | 40 | 26 | |||
32 | 39 | 25 | |||
31 | 38 | 24 | |||
30 | 37 | 23 | |||
29 | 36 | 22 | |||
28 | 35 | 21 | |||
27 | 34 | 20 | |||
26 | 33 | 19 | |||
25 | 32 | 18 | |||
24 | 31 | 17 | |||
23 | 30 | 16 | |||
22 | 29 | 15 | |||
21 | 28 (3,*) | 12.1 | |||
20 | 27 (3,*) | 12 (3,*) | |||
19 | 26 (3,*) | 11.6 (3,*) | |||
18 | 25 (3,*) | 11.5 (3,*) | |||
17 | 24 (3,*) | 11.1 (3,*) | |||
16 | 23 (3,*) | 11 (3,*) | |||
15 (2) | 22 (3,*) | 10.6 (3,*) | |||
14 (2) | 21 (3,*) | 10.5 (3,*) | |||
13 (2) | 20 (3,*) | 10.0-10.1 (3,*) | |||
12 (2) | 19 (3,*) | 9.5-9.6 (3,*) | |||
11 (2) | 18 (3,*) | 9 | |||
10 (2) | 17 (3,*) | ||||
9 (2) | 16 (3,*) | ||||
8 (2) | 15 (3,*) | ||||
7 (2) | 14 (3,*) | ||||
6 (2) | 13 (3,*) | ||||
5 (2) | 12 (3,*) | ||||
4 (2) | 11 (3,*) | ||||
3.6 (2) | 10 (3,*) | ||||
3.5 (2) | 9 (3,*) | ||||
3 | 8 (3,*) | ||||
2 | 7 (3,*) | ||||
6 (3,*) | |||||
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 |
---|---|---|---|---|---|---|---|---|---|---|---|
12 (3,*) | all (1) | 67 | 10 (3,*) | 46 | 70 | 63 | 11 (1) | 11.8 | 7.2 | 1.2 | 7.12 |
11.3-11.4 (3,*) | 4.4.3-4.4.4 | 7 (3,*) | 12.1 | 10 (1) | 6.2 | ||||||
11.0-11.2 (3,*) | 4.4 | 12 (3,*) | 5 | ||||||||
10.3 (3,*) | 4.2-4.3 (3,*) | 11.5 (3,*) | 4 | ||||||||
Show all | |||||||||||
10.0-10.2 (3,*) | 4.1 (3,*) | 11.1 (3,*) | |||||||||
9.3 (3,*) | 4 (3,*) | 11 (3,*) | |||||||||
9.0-9.2 (3,*) | 3 (3,*) | 10 (3,*) | |||||||||
8.1-8.4 (3,*) | 2.3 (3,*) | ||||||||||
8 (3,*) | 2.2 | ||||||||||
7.0-7.1 (3,*) | 2.1 | ||||||||||
6.0-6.1 (3,*) | |||||||||||
5.0-5.1 (3,*) | |||||||||||
4.2-4.3 (3,*) | |||||||||||
4.0-4.1 (3,*) | |||||||||||
3.2 |
Supports the dpi
unit, but does not support dppx
or dpcm
units.
Firefox before 16 supports only dpi
unit, but you can set 2dppx
per min--moz-device-pixel-ratio: 2
Supports the non-standard min
/max-device-pixel-ratio
Microsoft Edge has a bug where min-resolution
less than 1dpcm
is ignored.
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-media-resolution