Bildschirm-Ratgeber
CSS-Pixel und echte Pixel: Warum der Browser anders zählt
Ein typischer Fall: Auf dem Karton vom Monitor im Laden stehtsteht 2880 × 1800 Pixel, unter Tool meldet aber nur 1440 × 900. Ist die Hälfte der Auflösung verschwunden? Nein! Der Browser zählt in diesem Fall schlicht anders. Dahinter stecken CSS-Pixel, Gerätepixel und die Skalierung des Systems.
Der Unterschied in einem Satz
Ein echter beziehungsweise physischer Pixel ist ein Bildpunkt des Displays. Ein CSS-Pixel stellt dagegen nur eine Recheneinheit dar, mit der Webseiten ihre Größe festlegen. Auf einem hochauflösenden Bildschirm kann ein CSS-Pixel deshalb aus mehreren Gerätepixeln bestehen.
Das ist sogar gewollt! Würde ein modernes Notebook, Tablet oder Smartphone mit sehr hoher Pixeldichte jedes Element stur Pixel für Pixel darstellen, wären Texte, Symbole und Schaltflächen oft viel zu klein. Die Skalierung sorgt also dafür, dass alle Dinge und Bedienelemente ungefähr in einer brauchbaren Größe erscheinen und trotzdem feiner gezeichnet werden.
Ein Beispiel mit Faktor 2
Nehmen wir beispielsweise ein Display mit 2880 × 1800 physischen Pixeln. Wird die Oberfläche mit einem Verhältnis von 2:1 dargestellt, kann der Browser 1440 × 900 CSS-Pixel als Bildschirmfläche ermitteln. Für einen CSS-Pixel stehen dabei rechnerisch aber 2 Gerätepixel je Richtung zur Verfügung.
Wichtig ist in diesem Zusammenhang das Wort „rechnerisch“. Browser und Betriebssystem können Werte aus Datenschutz- oder Kompatibilitätsgründen absichtlich anders bzw. falsch melden. Auch Zoom spielt hinein. Aus einer einzelnen Zahl lässt sich die native Monitorauflösung daher nicht immer zweifelsfrei zurückrechnen.
Was bedeutet Device-Pixel-Ratio?
JavaScript stellt als Funktion den Wert Device-Pixel-Ratio bereit. Ein Wert von 1 bedeutet vereinfacht, dass ein CSS-Pixel ungefähr einem Gerätepixel entspricht. Bei 2 werden für die Darstellung eines CSS-Pixels mehr physische Pixel genutzt. Werte wie 1.25, 1.5 oder 2 sind auf modernen Geräten nichts Ungewöhnliches.
Aber Achtung: Device-Pixel-Ratio ist keine reine Hardwareeigenschaft. Bereits der Seitenzoom kann den Wert verändern oder der Wechsel auf einen Monitor mit anderer Skalierung. Wer daraus direkt „mein Display hat exakt diese Auflösung“ ableitet, macht es sich zu einfach.
Browserzoom und Betriebssystem-Skalierung sind nicht dasselbe
Die Betriebssystem-Skalierung betrifft die gesamte Oberfläche. Windows kann beispielsweise Texte, Fenster und Bedienelemente größer darstellen, obwohl der Monitor weiterhin mit seiner nativen Auflösung arbeitet. Apples macOS verfolgt einen ähnlichen Ansatz und bietet, je nach Display, verschiedene Darstellungsgrößen.
Beim Browserzoom verändert sich hingegen lediglich die Darstellung einer Webseite. Eine Änderung auf 125 oder 150 Prozent bewirkt nur das der Inhalt größer wird, ohne dass sich die Monitorauflösung ändernt. Genau diese beiden Ebenen sind ein Grund dafür, warum Webseiten keine zuverlässige Diagnose des Monitors durchführen können.
Warum gibt es überhaupt CSS-Pixel?
Webseiten sollen auf einem großen Desktop-Monitor genauso bedienbar bleiben wie auf einem kleinen Smartphone mit extrem hoher Pixeldichte. Würde das Webdesign nur mit echten Gerätepixeln arbeiten, wären Schaltflächen auf manchen Displays riesig und auf anderen kaum zu treffen.
CSS-Pixel schaffen deshalb eine gemeinsame Darstellungsebene. Responsive Webseiten passen sich anschließend an die verfügbare Breite an. Für Sie als Anwender läuft das unsichtbar ab, bis man anfängt die Werte eines Browsers mit dem Datenblatt des Monitors zu vergleichen.
Welche Zahl soll man nun ernst nehmen?
Wenn Sie wissen möchten, wie viel Platz eine Webseite tatsächlich zur Verfügung hat, sind CSS-Pixel genau richtig. Ist die native Panelauflösung des Monitors gefragt bleibt zuverlässig nur der Blick in die Anzeigeeinstellungen oder das Herstellerdatenblatt. Und wenn es um die wahrgenommene Schärfe geht, kommt zusätzlich die Bildschirmgröße beziehungsweise PPI ins Spiel.
Kurz gesagt: Es gibt nicht die eine Pixelzahl für jede Fragestellung. Bildschirmcheck.de zeigt deshalb getrennt, was direkt vom Browser gemeldet und was daraus lediglich berechnet wird.