TOOLADEX
light
← Back to Blog

Browser-Dimensionen: Ansicht Viewport & Bildschirmgröße in Echtzeit

By Tooladex Team •
BrowsergrößenViewportResponsives DesignEntwicklertools
Browser-Dimensionen: Ansicht Viewport & Bildschirmgröße in Echtzeit

Brauchen Sie die Größe Ihres Viewports oder möchten Sie Breakpoints überprüfen? Das Browser Dimensions-Tool zeigt die Viewport-, Fenster- und Bildschirmdimensionen in Echtzeit an – und aktualisiert sich automatisch, während Sie die Größe ändern. Alle Werte werden aus Ihrem Browser gelesen; es werden keine Daten an einen Server gesendet.

Beispiel: Öffnen Sie das Tool und ändern Sie die Größe Ihres Browserfensters. Beobachten Sie, wie sich die Werte für Viewport (inner) und Fenster (outer) live aktualisieren. Kopieren Sie die vollständige JSON-Ausgabe, um die Dimensionen für Design-Spezifikationen oder Debugging zu dokumentieren.

Was sind Browser-Dimensionen?

Browser-Dimensionen sind die Pixelmessungen Ihres Browserfensters und Displays. Der Viewport ist der sichtbare Bereich für Webinhalte (ohne Adressleiste und Bildlaufleisten). Das Fenster umfasst das gesamte Browser-Chrome. Der Bildschirm spiegelt Ihr physisches Display wider. Das Verständnis dieser Unterschiede hilft bei responsive Design, Media Queries und beim Debuggen von Layout-Problemen.

Das Tooladex Browser Dimensions-Tool liest diese Werte direkt aus den JavaScript-APIs Ihres Browsers. Alles läuft lokal; nichts wird hochgeladen oder gespeichert.

Warum ein Browser-Dimensions-Tool verwenden?

Responsive Design — Überprüfen Sie Breakpoints und das Verhalten von Media Queries bei verschiedenen Viewport-Größen. Ändern Sie die Fenstergröße und sehen Sie genau, wann sich Layouts ändern.

CSS-Debugging — Wenn 100vw oder 100vh unerwartet reagieren (z. B. Bildlaufleistenversatz), überprüfen Sie die tatsächlichen Viewport-Dimensionen.

Dokumentation — Erfassen Sie Viewport-Größen für Design-Spezifikationen, Testanleitungen oder Fehlerberichte. Kopieren Sie die JSON-Ausgabe für einfaches Teilen.

Gerätetests — Vergleichen Sie Dimensionen über verschiedene Geräte, Zoomstufen und Browserkonfigurationen hinweg. Das Geräte-Pixelverhältnis und die Farbtiefe sind enthalten.

Wie das Browser Dimensions Tool funktioniert

  1. Öffnen Sie das Tool in Ihrem Browser. Die Dimensionen werden automatisch geladen.
  2. Ändern Sie die Fenstergröße — die Werte aktualisieren sich in Echtzeit. Kein Refresh erforderlich.
  3. Überprüfen Sie die Karten — Die Viewport (inner), Fenster (outer) und Bildschirmdimensionen werden mit ihren entsprechenden JavaScript-Eigenschaftsnamen angezeigt.
  4. Kopieren Sie die JSON — Klicken Sie auf "JSON kopieren", um alle Dimensionen in einem strukturierten Format zu kopieren.

Viewport vs Fenster vs Bildschirm

Viewport (inner) — window.innerWidth × window.innerHeight. Der sichtbare Bereich für Webinhalte. Schließt Adressleiste, Toolbars und Bildlaufleisten aus. Dies ist das, worauf CSS-Media-Queries und 100vw / 100vh typischerweise verweisen.

Fenster (outer) — window.outerWidth × window.outerHeight. Das gesamte Browserfenster einschließlich Chrome. Nützlich zum Testen der Fenstergröße oder des Vollbildverhaltens.

Bildschirm — screen.width × screen.height. Ihre physische Displayauflösung. screen.availWidth und screen.availHeight schließen die Taskleiste und andere OS-Benutzeroberflächen aus.

Häufig gestellte Fragen

Warum unterscheidet sich der Viewport vom Fenster?
Der Viewport schließt die Benutzeroberfläche des Browsers (Adressleiste, Tabs, Bildlaufleisten) aus. Das Fenster umfasst alles. Auf Mobilgeräten versteckt sich die Adressleiste oft beim Scrollen, sodass sich der Viewport ändern kann.

Was ist das Geräte-Pixelverhältnis?
Das Geräte-Pixelverhältnis (DPR) ist das Verhältnis von physischen Pixeln zu CSS-Pixeln. Auf Retina- oder hochauflösenden Displays kann der DPR 2 oder 3 betragen – ein CSS-Pixel entspricht mehreren physischen Pixeln. Dies beeinflusst die Bildschärfe und die Darstellung von 1px-Rändern.

Werde ich irgendwohin Daten senden?
Nein. Alle Dimensionswerte werden lokal in Ihrem Browser gelesen. Nichts wird hochgeladen oder gespeichert.

Datenschutz

Alle Verarbeitungen laufen in Ihrem Browser. Wir senden oder speichern keine Dimensionsdaten.

Probieren Sie das Browser Dimensions Tool aus

Browser Dimensions

View your browser viewport, window, and screen dimensions in real time. Perfect for responsive design, breakpoint testing, and CSS media queries. Updates as you resize.

Try Tool Now

The Browser Dimensions tool is free, works in your browser, and requires no sign-up. Open it, resize your window, and get live viewport, window, and screen dimensions — perfect for responsive design and breakpoint testing.

Related Tools