-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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-device-pixel-ratio media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch