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

Die -webkit-device-pixel-ratio ist eine nicht standardisierte Boolean-CSS-Medienfunktion, die eine Alternative zur standardisierten resolution-Medienfunktion darstellt.

Hinweis: Wenn möglich, verwenden Sie die resolution-Medienanfrage, da dies eine standardisierte Medienfunktion ist. Obwohl diese mit Präfix versehene Medienfunktion eine WebKit-Funktion ist, könnten auch andere Browser-Engines sie unterstützen. Siehe Browser-Kompatibilität unten.

Syntax

Die -webkit-device-pixel-ratio-Funktion wird als <number>-Wert angegeben. Es handelt sich um eine Bereichs-Funktion, was bedeutet, dass Sie auch die mit Präfix versehenen -webkit-min-device-pixel-ratio- und -webkit-max-device-pixel-ratio-Varianten verwenden können, um minimale und maximale Werte abzufragen.

Werte

<number>

Die Anzahl der Gerätepixel, die verwendet werden, um jedes CSS-px darzustellen. Obwohl der Wert eine <number> ist und daher syntaktisch keine Einheiten erlaubt, ist die implizite Einheit dppx.

Implementierung

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

Beispiele

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

Ergebnis

Spezifikationen

Specification
Compatibility
# css-media-queries-webkit-device-pixel-ratio

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch