Viewport-Messung

Was dieses Werkzeug misst

Fensterinnenbreite (window.innerWidth)

Die Breite des Anzeigebereichs in CSS-Pixeln. Sie schliesst die senkrechte Scrollleiste mit ein. Ob das einen Unterschied macht, hängt von der Art der Scrollleiste ab: Überlagernde Scrollleisten legen sich über den Inhalt und nehmen keinen Platz weg – dann sind beide Werte gleich und die Anzeige unten zeigt 0. Das ist auf Touchgeräten die Regel und unter Windows 11 auch am PC voreingestellt. Klassische Scrollleisten schieben den Inhalt zur Seite – dann fehlen der Inhaltsbreite rund 15 bis 17 Pixel. Die Anzeige unten misst das auf diesem Gerät nach, statt es zu vermuten.

Inhaltsbreite (documentElement.clientWidth)

Die Breite, die dem Inhalt tatsächlich zur Verfügung steht, ohne Scrollleiste und ohne Rahmen. Das ist der Wert, an dem sich ein Layout ausrichten muss.

Wichtig: Eine Scrollleiste nimmt nur dann Platz weg, wenn sie überhaupt da ist. Passt eine Seite ohne senkrechtes Scrollen auf den Bildschirm, zeigt die Messung 0 – auch bei klassischen Scrollleisten. Derselbe Rechner kann auf einer kurzen Seite 0 und auf einer langen Seite 15 melden.

Gerätepixelverhältnis (window.devicePixelRatio)

Das Verhältnis von physischen Bildpunkten zu CSS-Pixeln. Ein Wert von 2,81 bedeutet: Ein CSS-Pixel wird auf 2,81 echten Bildpunkten dargestellt. Der Wert ist nicht fest – er ändert sich mit der Zoomstufe des Browsers und mit Systemeinstellungen wie dem Bildschirmzoom unter Android oder der Skalierung unter Windows.

Bildschirmbreite (screen.width)

Die Breite des gesamten Bildschirms in CSS-Pixeln, unabhängig davon, wie gross das Browserfenster gerade ist.

Bildschirmbreite mal Verhältnis

Das ist eine Rechnung, keine Messung – und sie stimmt nur bei einem Browserzoom von 100 Prozent. Der Grund: Der Browserzoom steckt im Gerätepixelverhältnis mit drin, die Bildschirmbreite ändert sich dadurch aber nicht. Bei 200 Prozent Zoom kommt hier das Doppelte der echten Bildpunkte heraus. Ein Beispiel mit echten Zahlen steht weiter unten.

Bei 100 Prozent Zoom kann der Wert trotzdem von der beworbenen Bildschirmauflösung abweichen: Ein Samsung Galaxy S23 Ultra wird mit 1440 Bildpunkten Breite beworben, rendert ab Werk aber in einer reduzierten Stufe und kommt hier auf genau 1080. Die Herstellerangabe aus dem Datenblatt ist für das Webdesign ohne Bedeutung.

Waagrechter Scrollbalken

Vergleich von scrollWidth mit clientWidth am Wurzelelement. Ist der Inhalt breiter als der Platz, liegt ein Überlauf vor. Auf dieser Seite darf das nie der Fall sein.

Belegte Messreihe: derselbe Monitor, vier Zoomstufen

Gemessen am 23.09.2026 mit diesem Werkzeug. Chrome 154 unter Windows 11, Fenster maximiert, Windows-Skalierung 100 %, Monitor 2560 CSS-Pixel breit. Verändert wurde ausschliesslich der Browserzoom (Strg und Plus).

Was diese Reihe zeigt:

• Ein 2560-Pixel-Monitor ist bei 200 % Zoom für CSS ein 1280er. 2560 geteilt durch die Zoomstufe ergibt exakt die gemessene Fensterbreite.
• Die Scrollleiste ist physisch immer gleich breit. 15 geteilt durch 1,25 ergibt 12, durch 1,5 ergibt 10, durch 2 ergibt 7,5. In CSS-Pixeln schrumpft sie, auf dem Bildschirm bleibt sie gleich.
• Die letzte Spalte ist ab 125 % falsch. Der Monitor hat 2560 echte Bildpunkte, die Rechnung behauptet bis zu 5120. Deshalb steht bei diesem Feld oben der Vorbehalt. Wer solche Zahlen ohne Vorbehalt veröffentlicht, verbreitet Unsinn – dieses Werkzeug tat es bis zum 23.09.2026 selbst.

Grundlage und Quellen

• MDN – Window.innerWidth (deutsch): „Dies schliesst die Breite der vertikalen Scrollleiste ein, falls eine vorhanden ist.“
• MDN – Window.devicePixelRatio (deutsch): Verhältnis der Auflösung in physikalischen Pixeln zur Auflösung in CSS-Pixeln.
• MDN – meta name="viewport" (deutsch)
• Messwert Galaxy S23 Ultra vom 23.09.2026: 384×718 CSS-Pixel, Gerätepixelverhältnis 2,81, Werkseinstellungen, Chrome.

Hinweis: Die deutschen MDN-Seiten sind automatisch aus dem Englischen übersetzt und können Fehler enthalten. MDN kennzeichnet das selbst. Die hier zitierten Stellen wurden am 23.09.2026 geprüft.