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

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) { ... }

Example

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 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?

491 2

451 3

No Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

1. Implemented as an alias for for -moz-device-pixel-ratio.

2. From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

Contributors to this page: estelle, mfluehr, connorshea, freginold, Sebastianz, rolfedh, cvrebert
Last updated by: estelle,