Vom Browser gemeldeter Bildschirm–
Breite und Höhe aus dem Screen-Objekt, in CSS-Pixeln.
Warum mehrere Auflösungswerte gleichzeitig richtig sein können
CSS-Pixel und Device Pixel Ratio verständlich erklärt
Sie haben einen 4K-Monitor, aber der Browser meldet nur 1920 × 1080? Das sieht im ersten Moment nach einer falschen Auflösung aus. Häufig steckt schlicht die Skalierungsebene des Browsers dahinter. Hier sehen Sie Ihre aktuellen Werte direkt nebeneinander.
- CSS-Pixel
- Device Pixel Ratio
- Browserzoom
- Viewport
Die Ebenen einmal auseinandergezogen
Was der Browser tatsächlich sieht
Die große Zahl aus dem Herstellerdatenblatt und die kleinere Browserzahl beschreiben oft unterschiedliche Ebenen. Der folgende Ablauf wird mit Ihren aktuellen Werten gefüllt.
Device Pixel Ratio–
Verhältnis zwischen CSS-Pixelgröße und Gerätepixelgröße.
Rechnerische Pixel-Hochrechnung–
Nützlich als Orientierung, aber nicht automatisch die sichere native Panelauflösung.
Einfach selbst durchrechnen
Was macht ein DPR von 1, 1,5 oder 2?
Der kleine Rechner zeigt nur die Mathematik hinter der Hochrechnung. Er simuliert kein Betriebssystem und behauptet deshalb auch nicht, dass ein bestimmter DPR automatisch einer bestimmten Windows-Skalierung entspricht.
CSS-Größe und DPR eingeben
Ihre aktuellen Browserwerte
– · DPR –
Der Rechner wird vorbereitet.
Rechnerische Zuordnung
- Pixel-Hochrechnung
- –
- Gerätepixel je CSS-Pixel in Breite
- –
- Gerätepixel je CSS-Pixel in der Fläche
- –
- CSS-Pixel insgesamt
- –
- hochgerechnete Pixel
- –
Die Rechnung lautet Breite × DPR und Höhe × DPR.
Ein typisches 4K-Beispiel
Was genau ist ein CSS-Pixel?
CSS-Pixel sind die Recheneinheit, in der Webseiten ihre Oberfläche aufbauen. Ein Kasten mit 300 CSS-Pixeln Breite soll auf sehr unterschiedlichen Geräten sinnvoll nutzbar bleiben – vom normalen Bürobildschirm bis zum extrem hochauflösenden Smartphone. Das funktioniert gerade deshalb, weil ein CSS-Pixel nicht zwingend ein einzelnes physisches Displaypixel sein muss.
Die aktuelle CSSOM-View-Spezifikation legt für die dort beschriebenen Koordinaten und Abmessungen CSS-Pixel fest. Auch die über den Browser bereitgestellte Bildschirmfläche wird in dieser Einheit beschrieben. Wer also `screen.width` ausliest, bekommt keine garantierte Anzahl physischer Panelpixel.
DPR: ein Faktor in zwei Richtungen
Wichtig: DPR 2 bedeutet nicht einfach „doppelt so viele Pixel“. Denn der Faktor gilt für Breite und Höhe gleichermaßen. Aus einer CSS-Fläche von 100 × 100 werden rechnerisch 200 × 200 Gerätepixel – also 40.000 statt 10.000 Pixel. In der Fläche ist das also Faktor vier!
Bei DPR 1,5 wären aus 100 × 100 CSS-Pixeln rechnerisch 150 × 150 Gerätepixel, also Faktor 2,25 bei der Pixelmenge. Der Rechner oben macht genau diese Beziehung sichtbar.
Viewport ist nicht Bildschirmauflösung
Der Viewport beschreibt den Platz, den die Webseite tatsächlich bekommt. Auf einem großen Desktopmonitor kann das Browserfenster nur halb geöffnet sein. Dann bleibt die Bildschirmgröße gleich, während der Viewport deutlich kleiner wird. Auf Smartphones kommt noch der visuelle Viewport hinzu, der sich beispielsweise durch Pinch-Zoom und eingeblendete Browserleisten verändern kann.
Für responsive Webseiten ist deshalb meist der Viewport in CSS-Pixeln entscheidend. Für ein Wallpaper interessiert eher die tatsächliche Zielauflösung. Und beim Monitorkauf sollten Sie Herstellerauflösung, Zollgröße und Pixeldichte betrachten. Die richtige Zahl hängt also ganz schlicht davon ab, was Sie gerade vorhaben.
Häufige Fragen
CSS-Pixel, DPR, Browserzoom und Viewport
Die Begriffe wirken technischer als sie sind. Wichtig ist vor allem, nicht jede Browserzahl automatisch mit der Hardwareauflösung gleichzusetzen.
Was ist ein CSS-Pixel?
Ein CSS-Pixel ist die Maßeinheit, mit der Webseiten ihre Größen und Abstände berechnen. Er muss nicht einem einzelnen physischen Displaypixel entsprechen. Auf hochauflösenden Displays (4K z. B.) können mehrere Gerätepixel für die Darstellung eines CSS-Pixels verwendet werden.
Was bedeutet Device Pixel Ratio?
DPR beschreibt das Verhältnis zwischen der CSS-Pixelgröße und der Gerätepixelgröße. Ein DPR von 4 heißt also: Hier liegt rechnerisch Faktor 4 in Breite und Höhe vor. Für eine Fläche von einem CSS-Pixel ergibt das rechnerisch 4 Gerätepixel.
Warum zeigt mein 4K-Monitor im Browser 1920 × 1080?
Bei einer passenden Skalierung kann ein 3840 × 2160-Panel beispielsweise als 1920 × 1080 CSS-Pixel dargestellt werden. Mit einem DPR von 2 ergibt die Hochrechnung wieder 3840 × 2160. Das ist ein typischer Fall, aber keine allgemeine Garantie für jeden Browser und jedes Gerät.
Beeinflusst der Browserzoom das Device Pixel Ratio?
Ja. Die CSSOM-View-Spezifikation bezieht den aktuellen Seitenzoom in die Bestimmung der Device Pixel Ratio ein. Wer im Desktop-Browser hinein- oder herauszoomt, kann deshalb einen anderen DPR-Wert ablesen.
Ist Device-Pixel-Ratio dasselbe wie Windows-Skalierung?
Nein. Beide Dinge hängen in der Praxis häufig zusammen, sind aber nicht zwingend identisch. Das DPR ist ein vom Browser bereitgestellter Webwert. Betriebssystem-Skalierung, Pixeldichte des Displays, Browserzoom und Browserimplementierung können zusammen beeinflussen, welcher Wert letztlich gemeldet wird.
Kann eine Webseite die native Monitorauflösung sicher auslesen?
Nicht zuverlässig! Browser dürfen selbt Bildschirmangaben aus Datenschutzgründen maskieren oder verändern. Deshalb trennt MeineAufloesung.de CSS-Bildschirmgröße, DPR und Pixel-Hochrechnung voneinander und bezeichnet die Hochrechnung nicht pauschal als native Panelauflösung.
Was ist der Unterschied zwischen Bildschirmgröße und Viewport?
Die Bildschirmgröße beschreibt die vom Browser gemeldete Fläche des Ausgabegeräts. Der Viewport ist dagegen der Bereich, der einer Webseite im Browserfenster zur Verfügung steht. Er ist normalerweise kleiner und kann sich beim Ändern der Fenstergröße sofort verändern.