Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/css/@media/-webkit-device-pixel-ratio/index.md
6532 views
---
title: "-webkit-device-pixel-ratio"
slug: Web/CSS/@media/-webkit-device-pixel-ratio
page-type: css-media-feature
browser-compat: css.at-rules.media.-webkit-device-pixel-ratio
---

{{CSSRef}}

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 {{cssxref("<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

  • {{cssxref("<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) {
  /* … */
}
/* 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

{{EmbedLiveSample("Examples")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also