Was sind Bildschirm- und Viewport-Informationen?
Jeder Browser stellt ein screen-Objekt und einen Viewport bereit. screen.width und screen.height geben den Bildschirm in CSS-Pixeln an, innerWidth und innerHeight dagegen den sichtbaren Viewport ohne Symbolleisten. devicePixelRatio sagt, wie viele physische Punkte auf einen CSS-Pixel entfallen, und colorDepth, wie viele Bits jeden Pixel beschreiben.
Beispiel: Ein Laptop mit einem physischen 2560x1600-Panel und devicePixelRatio 2 meldet screen.width=1280 und screen.height=800 CSS-Pixel — genau die Größe für eine Media Query. colorDepth 24 bedeutet 8 Bit pro Kanal, also 2^24 = 16.777.216 Farben. Ist innerWidth größer als innerHeight, liegt das Gerät im Querformat; tausche die Werte und es ist Hochformat.
So liest man den Bildschirmbericht
- Öffne die Seite — das Tool liest die Werte sofort aus dem Browser und lädt nichts hoch.
- Vergleiche Bildschirm- und Fenstergröße, um zu sehen, wie viel Platz die Leisten belegen.
- Prüfe das Pixelverhältnis, um zu entscheiden, ob Grafiken Retina-Varianten brauchen.
- Beobachte, wie sich die Werte beim Ändern der Fenstergröße oder beim Drehen des Geräts live aktualisieren.
Bildschirm und Viewport — häufige Fragen
Worin unterscheiden sich Bildschirm- und Fenstergröße?
screen.width gibt den gesamten Bildschirm in CSS-Pixeln an, innerWidth nur den sichtbaren Viewport, den Leisten und Seitenpanels verkleinern. Media Queries reagieren auf den Viewport, nicht auf den Bildschirm.
Was bedeutet das Gerätepixelverhältnis?
Es ist die Zahl der physischen Pixel pro CSS-Pixel. Ein Verhältnis von 2 (typisch für Retina und viele Smartphones) heißt, dass ein 10px-Rahmen 20 physische Pixel zeichnet, Bilder also in 2x geliefert werden sollten.
Warum ist die Farbtiefe meist 24 oder 30?
24 Bit bedeutet 8 Bit je Rot-, Grün- und Blaukanal — 16.777.216 Farben. Panels mit 30 Bit (10 Bit pro Kanal) liefern feinere Verläufe für HDR, doch Browser oder Treiber können den gemeldeten Wert begrenzen.
