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 zeigt ein klassisches 96 DPI-Display an, während ein Wert von 2 für HiDPI/Retina-Displays erwartet wird.

Andere Werte können im Fall von ungewöhnlich niedrigen Auflösungsdisplays oder, häufiger, wenn ein Bildschirm eine höhere Pixeldichte als das doppelte der Standardauflösung von 96 DPI aufweist, zurückgegeben werden. Moderne mobile Gerätebildschirme - die hohe Display-Auflösungen bei kleinen physikalischen Größen 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 unscharf 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);

Überwachung von Bildschirmauflösungs- oder Zoomstufenänderungen

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

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 Bildschirmauflösung mit einer bestimmten Anzahl von Gerätepunkten pro px übereinstimmt.

Die Variable media ist ein MediaQueryList-Objekt, das mit dem Medienabfrage-String initialisiert wird. Wenn sich das Ergebnis der Ausführung 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 Auflösungsänderung ein neues 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

Um das Beispiel zu testen, versuchen Sie, die Seite hinein- und herauszuzoomen und beachten Sie den Unterschied im protokollierten Wert von devicePixelRatio.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Medienabfragen
• Verwendung von Medienabfragen
• resolution
• Die image-resolution-Eigenschaft