-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 media feature which is an alternative to the standard resolution media feature.

Note: This media feature is only supported by WebKit. 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.

Example

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

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio (Yes) No support[1] No support (Yes) ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio ? ? ? ? ?

[1] Implemented as aliases for min--moz-device-pixel-ratio and max--moz-device-pixel-ratio for Web compatibility reasons in Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) (see bug 1176968) behind the preferences layout.css.prefixes.webkit and layout.css.prefixes.device-pixel-ratio-webkit, defaulting to false. Since Gecko 49.0 (Firefox 49 / Thunderbird 49 / SeaMonkey 2.46) layout.css.prefixes.webkit defaults to true.

See also

Document Tags and Contributors

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