-webkit-device-pixel-ratio

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

<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 is dppx.

Implementation

css
/* 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

html
<p>This is a test of your device's pixel density.</p>

CSS

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-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.

See also