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 feature which is an alternative to the standard resolution
media feature.
Note: This media feature is a WebKit feature. 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
.
Implementation
/* 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) { ... }
Examples
HTML
<p>This is a test of your device's pixel density.</p>
CSS
/* Exact resolution */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* Minimum resolution */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* Maximum resolution */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Compatibility StandardThe definition of '-webkit-device-pixel-ratio' in that specification. | Living Standard | Initial standardization |
[https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 Safari CSS Reference
'media query extensions' in that document.] |
Non-standard unofficial documentation | Initial documentation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android Full support 63 Full support 63 Notes' Implemented as an alias for for Notes' Implemented as an alias for for Notes' Implemented as an alias for for |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- Using media queries
<resolution>
-webkit-transform-2d
-webkit-transform-3d
-webkit-transition
-webkit-animation
- W3C Suggested Method to UnPrefix
-webkit-device-pixel-ratio by Mozilla Contributors is licensed under CC-BY-SA 2.5.