DiedevicePixelRatio-Eigenschaft desWindow-Interfaces gibt das Verhältnis der Auflösung inphysischen Pixeln zur Auflösung inCSS-Pixeln für das aktuelle Anzeigegerät zurück.

Dieser Wert kann auch als Verhältnis der Pixelgrößen interpretiert werden: die Größe einesCSS-Pixels zur Größe einesphysischen Pixels. Einfacher ausgedrückt, teilt dies dem Browser mit, wie viele der tatsächlichen Bildschirmpixel verwendet werden sollen, um einen einzelnen CSS-Pixel zu zeichnen.

Das Seitenzoomen beeinflusst den Wert vondevicePixelRatio. Wenn eine Seite vergrößert wird (größer gemacht wird), erhöht sich die Größe eines CSS-Pixels, und somit erhöht sich derdevicePixelRatio-Wert. Pinch-Zooming beeinflusstdevicePixelRatio nicht, da hierbei die Seite vergrößert wird, ohne die Größe eines CSS-Pixels zu ändern.

Dies ist nützlich, wenn die Unterschiede zwischen der Darstellung auf einem Standarddisplay und einem HiDPI- oder Retina-Display berücksichtigt werden, bei denen mehr Bildschirmpixel verwendet werden, um dieselben Objekte zu zeichnen, was zu einem schärferen Bild führt.

Sie könnenwindow.matchMedia() verwenden, um zu überprüfen, ob sich der Wert vondevicePixelRatio ändert (was passieren kann, wenn der Benutzer das Fenster auf ein Display mit einer anderen Pixeldichte zieht). Sehen Sie sichdas folgende Beispiel an.

Wert

Ein Gleitkommawert mit doppelter Genauigkeit, der das Verhältnis der Auflösung des Displays in physischen 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 Falle ungewöhnlich niedriger Auflösungs-Displays 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ätescreens, die hohe Displayauflösungen bei kleinen physischen Größen bieten, liefern oft einendevicePixelRatio-Wert von über 2.

Beispiele

Auflösungskorrektur in einem<canvas>

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

HTML

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

Bildschirmauflösungs- oder Zoomstufenänderungen überwachen

In diesem Beispiel richten wir eine Media Query ein und beobachten sie, um zu sehen, wann sich die Geräteauflösung ändert und protokollieren die neue Auflösung.

HTML

<div>  <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></div>

CSS

body {  font:    22px "Arial",    sans-serif;}#container {  border: 2px solid #2222dd;  margin: 1rem auto;  padding: 1rem;  background-color: #aa99ff;}

JavaScript

Der StringmqString wird auf eine Media Query gesetzt, die überprüft, ob die aktuelle Displayauflösung einer bestimmten Anzahl von Gerätepunkten propx entspricht.

Die Variablemedia ist einMediaQueryList Objekt, das mit dem Media Query String initialisiert wird. Wenn das Ergebnis der Ausführung vonmqString gegen das Dokument sich ändert, löst daschange-Ereignis desmedia Objekts aus, und der Code protokolliert die neue Auflösung.

Beachten Sie, dass jedes Mal, wenn sich die Auflösung ändert, das Beispiel eine neue Media Query auf der Basis der neuen Auflösung und eine neue Instanz vonMediaQueryList erstellen 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 ein- und auszuzoomen und beachten Sie den Unterschied im protokollierten Wert vondevicePixelRatio.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media Queries
• Media Queries verwenden
• CSSresolution Media Query
• Dieimage-resolution Eigenschaft