-webkit-device-pixel-ratio

The -webkit-device-pixel-ratio is a non-standard Boolean CSS media feature which is an alternative to the standard resolution media feature.

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

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

Browser compatibility

See also

• Using media queries
• <resolution>
• -webkit-transform-2d
• -webkit-transform-3d
• -webkit-transition
• -webkit-animation
• W3C Suggested Method to UnPrefix