Window: devicePixelRatio-Eigenschaft

Wert

Ein Gleitkommawert mit doppelter Präzision, der das Verhältnis der Auflösung des Displays in physikalischen Pixeln zur Auflösung in CSS-Pixeln angibt. Ein Wert von 1 weist auf ein klassisches 96-DPI-Display hin, während für HiDPI/Retina-Displays ein Wert von 2 erwartet wird.

Andere Werte können bei ungewöhnlich niedrig auflösenden Displays zurückgegeben werden oder häufiger, wenn ein Bildschirm eine höhere Pixeldichte als das Doppelte der Standardauflösung von 96 DPI hat. Moderne mobile Gerätescreens - die bei kleinen physikalischen Größen hohe Display-Auflösungen bieten - ergeben häufig einen devicePixelRatio-Wert größer als 2.

Beispiele

Korrektur der Auflösung in einem <canvas>

Ein <canvas> kann auf Retina-Bildschirmen zu verschwommen erscheinen. Verwenden Sie window.devicePixelRatio, um zu bestimmen, wie viel zusätzliche Pixeldichte hinzugefügt werden sollte, um ein schärferes Bild zu ermöglichen.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Set display size (css pixels).
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// Set actual size in memory (scaled to account for extra pixel density).
const scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// Normalize coordinate system to use CSS pixels.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "white";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";
ctx.fillText(textString, x, y);

Überwachen von Bildschirmauflösung oder Zoomstufenänderungen

In diesem Beispiel richten wir eine Medienabfrage ein und beobachten, wann sich die Geräteauflösung ändert, wobei die neue Auflösung protokolliert wird.

HTML

<div id="container">
  <p>
    This example demonstrates the effect of zooming the page in and out (or
    moving it to a screen with a different scaling factor) on the value of the
    <code>devicePixelRatio</code> property.
  </p>
  <p>Try it and watch what happens!</p>
</div>
<div id="output"></div>

CSS

body {
  font:
    22px "Arial",
    sans-serif;
}

#container {
  border: 2px solid #2222dd;
  margin: 1rem auto;
  padding: 1rem;
  background-color: #aa99ff;
}

JavaScript

Der String mqString wird auf eine Medienabfrage gesetzt, die überprüft, ob die aktuelle Display-Auflösung einer bestimmten Anzahl von Gerätepunkten pro px entspricht.

Die media-Variable ist ein MediaQueryList-Objekt, das mit dem Medienabfrage-String initialisiert wird. Wenn sich das Ergebnis des Ausführens von mqString gegen das Dokument ändert, wird das change-Ereignis des media-Objekts ausgelöst, und der Code protokolliert die neue Auflösung.

Beachten Sie, dass bei jeder Änderung der Auflösung ein neue Medienabfrage basierend auf der neuen Auflösung und eine neue MediaQueryList-Instanz erstellt werden muss.

let remove = null;
const output = document.querySelector("#output");

const updatePixelRatio = () => {
  remove?.();
  const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  const media = matchMedia(mqString);
  media.addEventListener("change", updatePixelRatio);
  remove = () => {
    media.removeEventListener("change", updatePixelRatio);
  };

  output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;
};

updatePixelRatio();

Ergebnis

Zum Testen des Beispiels versuchen Sie, die Seite zu zoomen und bemerken Sie den Unterschied im protokollierten Wert von devicePixelRatio.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media queries
• Medienabfragen verwenden
• resolution
• Die image-resolution-Eigenschaft