-webkit-device-pixel-ratio CSS media feature
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
The -webkit-device-pixel-ratio is a non-standard Boolean CSS media feature which is an alternative to the standard resolution media feature.
Note:
If possible, use the resolution media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See browser compatibility below.
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) {
/* … */
}
/* It is equivalent to: */
@media (min-resolution: 2dppx) {
/* … */
}
/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) {
/* … */
}
/* It 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 # css-media-queries-webkit-device-pixel-ratio |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-device-pixel-ratio media feature
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.