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.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49 | |||||||||||||||||
56 | 9.3webkit
See notes:
|
4.4 | |||||||||||||||
14 | 52 | 57 | 10webkit
See notes:
|
10.0-10.2webkit
See notes:
|
4.4.3-4.4.4 | 4 | |||||||||||
11
See notes:
|
15 | 53 | 58 | 10.1webkit
See notes:
|
44 | 10.3webkit
See notes:
|
all
See notes:
|
56 | 10webkit
See notes:
|
37 | 57 | 52 | 11
See notes:
|
11.4 | 5 | 1.2 | 7.12 |
54 | 59 | TPwebkit
See notes:
|
45 | ||||||||||||||
55 | 60 | 46 | |||||||||||||||
56 | 61 |
Notes
-
1
Supports the
dpi
unit, but does not supportdppx
ordpcm
units. -
2
Firefox before 16 supports only
dpi
unit, but you can set2dppx
permin--moz-device-pixel-ratio: 2
-
3
Supports the non-standard
min
/max-device-pixel-ratio