Was ist das Gerätepixelverhältnis?
Das Gerätepixelverhältnis gibt die Anzahl physischer Displaypixel pro CSS-Pixel entlang jeder Achse an. Bei einem Verhältnis von 2 entspricht ein CSS-Pixel einem Block aus 2 mal 2 Gerätepixeln. Es beeinflusst, wie viele Bilddetails ein Bildschirm innerhalb einer vorgegebenen Layoutgröße darstellen kann.
So funktioniert das Gerätepixelverhältnis
Ein Browser gestaltet Seiten in CSS-Pixeln und bildet dieses Koordinatensystem mithilfe eines Skalierungsfaktors auf die Gerätepixel des Displays ab. Der Faktor spiegelt die Anzeigeumgebung wider und kann sich mit der Displaykonfiguration oder dem Seitenzoom ändern. Er ist daher keine dauerhafte Hardwareeigenschaft. Die Auswahl von Bildkandidaten und die Größenfestlegung des Bitmap-Speichers eines Canvas können ihn nutzen, um Details bei der gerenderten CSS-Größe zu erhalten. Er gehört zu clientseitigen Darstellungsentscheidungen, nicht zu den Metadaten der intrinsischen Auflösung der Datei.
Wichtige Fakten
- Der Browser stellt das aktuelle Verhältnis über window.devicePixelRatio bereit. Wird ein Fenster zwischen Displays verschoben oder der Seitenzoom geändert, kann sich der Wert jedoch während einer Sitzung ändern.
- Mit dem Dichtedeskriptor von srcset kann der Browser Bildkandidaten mit der effektiven Displaydichte vergleichen und dabei auch eigene Auswahlregeln und Netzwerkbedingungen berücksichtigen.
- Ein Canvas, dessen Bitmap-Abmessungen lediglich seinen CSS-Abmessungen entsprechen, kann auf einem Bildschirm mit hoher Pixeldichte unscharf wirken; ein größerer Bitmap-Speicher erhöht jedoch auch Speicherbedarf und Zeichenaufwand.
Wann das Gerätepixelverhältnis wichtig ist
Berücksichtigen Sie das Gerätepixelverhältnis bei der Wahl responsiver Bildabmessungen für eine schärfere Darstellung. Eine übermäßig hohe Auflösung erhöht Übertragungsaufwand und Speicherbedarf, ohne mehr Details darzustellen, als das Display ermöglicht.