Die Device Pixel Ratio, kurz DPR, gibt an, wie viele physische Bildpunkte ein Bildschirm pro CSS-Pixel in jeder Richtung einsetzt. Bei einem Wert von 2 füllt ein einzelner CSS-Pixel vier Bildpunkte, zwei in der Breite und zwei in der Höhe. Die DPR ist eine reine Verhältniszahl ohne Einheit und sagt nichts darüber, wie fein ein Bildschirm physisch auflöst. Dafür ist die Pixel Density in ppi zuständig.
- Device Pixel Ratio
Verhältnis zwischen den physischen Bildpunkten eines Bildschirms und den CSS-Pixeln, mit denen das Layout rechnet.
Beispiel: „Das Testgerät meldet eine Device Pixel Ratio von 3, deshalb liefern wir das Logo als SVG aus.“Auch: DPR. Im Browser steht der Wert unter window.devicePixelRatio bereit. Gelegentlich taucht die Übersetzung Pixelverhältnis auf, durchgesetzt hat sich die englische Form.
Abgrenzung: Die Pixel Density misst in ppi, wie dicht die Bildpunkte physisch sitzen, und hängt von der Bildschirmgröße ab. Die DPR beschreibt allein den Umrechnungsfaktor, den der Hersteller festgelegt hat. Zwei Geräte mit derselben DPR können sich in ihrer Dichte deutlich unterscheiden.
Woher der Wert kommt
Der CSS-Pixel ist eine Rechengröße und keine physische Länge. Das W3C legt ihn so fest, dass ein Zoll immer 96 CSS-Pixeln entspricht, egal wie viele Bildpunkte ein Gerät auf diesem Zoll tatsächlich unterbringt. Die Device Pixel Ratio ist der Faktor, der zwischen beiden Welten übersetzt.
Hersteller wählen ihn so, dass Schrift und Bedienelemente auf allen Geräten ungefähr gleich groß wirken. Ein Telefon mit sehr dichtem Panel bekommt eine DPR von 3, ein einfacher Büromonitor eine von 1. Auf dem Desktop kommt die Skalierungseinstellung des Betriebssystems dazu, weshalb dort auch krumme Werte wie 1,25 oder 1,5 auftreten.
Was die Ratio für dein Layout bedeutet
Für die Breite deines Layouts ändert die DPR nichts. Ein Telefon mit 1170 Bildpunkten Breite und einer DPR von 3 meldet dem Browser 390 CSS-Pixel, und mit diesen 390 rechnen deine Media Queries. Ein Breakpoint bei 768 Pixeln bezieht sich also immer auf CSS-Pixel.
Sichtbar wird die DPR bei allem, was aus festen Bildpunkten besteht. Eine Pixelgrafik muss in passender Auflösung vorliegen, sonst rechnet der Browser hoch und die Kanten werden weich. Schrift und Vektorgrafiken bleiben davon unberührt, weil sie bei jedem Faktor neu gerastert werden. Eine Linie von einem CSS-Pixel bleibt auf einem Gerät mit DPR 3 gleich dick und wird lediglich sauberer gezeichnet.
Wie du den Wert ausliest
Im Browser steht die aktuelle Ratio unter window.devicePixelRatio. Konstant ist sie nicht: Der Wert ändert sich, wenn jemand die Seite zoomt oder das Fenster auf einen zweiten Monitor zieht. In CSS fragst du dasselbe über das Media Feature resolution ab, etwa mit min-resolution: 2dppx.
Wir empfehlen, Layout-Entscheidungen von einem bestimmten DPR-Wert unabhängig zu halten. Für Bilder trifft srcset die Auswahl zuverlässiger, weil der Browser dort Anzeigegröße und Gerätedichte zusammen bewertet. Die DPR direkt abzufragen lohnt sich vor allem dort, wo du selbst rasterst, etwa beim Zeichnen auf einem Canvas-Element.