TOOLADEX
light

Browser-Dimensionen

Sehen Sie Ihren Browser-Viewport, Fenster- und Bildschirmabmessungen in Echtzeit. Perfekt für responsives Design, Breakpoint-Tests und CSS-Media-Queries. Aktualisiert sich automatisch beim Ändern der Fenstergröße.

Loading dimensions…

JavaScript is required. This tool runs entirely in your browser.

Inhaltsverzeichnis

Was sind Browser-Dimensionen?

Browser-Dimensionen sind die Pixel-Messungen Ihres Browserfensters und Ihrer Anzeige. Dieses Tool zeigt den Viewport (der Bereich, in dem Webinhalte sichtbar sind), das Fenster (einschließlich Browser-Chrome) und den Bildschirm (Ihre Anzeige). Es wird in Echtzeit aktualisiert, wenn Sie die Fenstergröße ändern.

Alle Werte werden von den JavaScript-APIs Ihres Browsers gelesen. Es werden keine Daten an einen Server gesendet.

Viewport vs Fenster vs Bildschirm

  • Viewport (innen): Der sichtbare Bereich für Webinhalte — schließt Adressleiste, Symbolleisten und Scrollleisten aus. Verwenden Sie dies für responsives Design und das 100vw / 100vh-Verhalten.
  • Fenster (außen): Das vollständige Browserfenster einschließlich Chrome. Nützlich beim Testen der Fenstergröße oder des Vollbildverhaltens.
  • Bildschirm: Ihre physische Bildschirmauflösung. screen.availWidth und screen.availHeight schließen Taskleisten und OS-UI aus.

Häufige Anwendungsfälle

  • Responsives Design: Überprüfen Sie Breakpoints und Media-Query-Verhalten bei verschiedenen Viewport-Größen.
  • CSS-Debugging: Prüfen Sie die tatsächlichen Viewport-Dimensionen, wenn 100vw oder 100vh unerwartet reagieren.
  • Dokumentation: Erfassen Sie Viewport-Größen für Design-Spezifikationen oder Testanleitungen.
  • Gerätetests: Vergleichen Sie Dimensionen über verschiedene Geräte und Zoom-Stufen hinweg.

Häufig Gestellte Fragen

Warum unterscheidet sich der Viewport vom Fenster?

Der Viewport schließt die Browser-UI (Adressleiste, Tabs, Lesezeichen-Leiste, Scrollleisten) aus. Das Fenster enthält alles. Auf Mobilgeräten versteckt sich die Adressleiste beim Scrollen oft, sodass sich der Viewport ändern kann.

Was ist das Gerätepixelverhältnis?

Das Gerätepixelverhältnis (DPR) ist das Verhältnis von physischen Pixeln zu CSS-Pixeln. Auf einem Retina- oder High-DPI-Display kann das DPR 2 oder 3 sein — ein CSS-Pixel entspricht mehreren physischen Pixeln. Dies beeinflusst die Bildschärfe und das Rendering von 1px-Rändern.

Werden meine Daten irgendwohin gesendet?

Nein. Alle Dimensionswerte werden lokal in Ihrem Browser gelesen. Nichts wird hochgeladen oder gespeichert.

Share this tool

Share a direct link or embed this tool on your site. Keep the Tooladex attribution link to support the project.

X LinkedIn Reddit