Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The -webkit-device-pixel-ratio
is a non-standard Boolean CSS @media
media feature which is an alternative to the standard resolution
media feature.
Note: This media feature is only supported by WebKit. If possible, use the resolution
media feature query instead.
Syntax
The -webkit-device-pixel-ratio
feature is specified as a <number>
value. It is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio
and -webkit-max-device-pixel-ratio
variants to query minimum and maximum values, respectively.
Values
<number>
- The number of device pixels used to represent each CSS
px
. Although the value is a<number>
, and thus doesn't syntactically allow units, its implicit unit isdppx
.
Example
/* A unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dppx) { ... } /* Similarly: */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (max-resolution: 2dppx) { ... }
Specifications
Specification | Status | Comment |
---|---|---|
Compatibility Standard The definition of '-webkit-device-pixel-ratio' in that specification. |
Living Standard | Initial standardization |
Safari CSS Reference 'media query extensions' in that document. |
Non-standard unofficial documentation | Initial documentation |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
-webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio |
(Yes) | No support[1] | No support | (Yes) | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
-webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio |
? | ? | ? | ? | ? |
[1] Implemented as aliases for min--moz-device-pixel-ratio
and max--moz-device-pixel-ratio
for Web compatibility reasons in Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) (see bug 1176968) behind the preferences layout.css.prefixes.webkit
and layout.css.prefixes.device-pixel-ratio-webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49 / Thunderbird 49 / SeaMonkey 2.46) layout.css.prefixes.webkit
defaults to true
.