-webkit-device-pixel-ratio
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
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 |
---|
Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |
Browser compatibility
BCD tables only load in the browser