Viewport-Größe prüfen

Die genaue Größe des Seitenbereichs Ihres Browsers und der passende Breakpoint.

Läuft in Ihrem Browser
Keine Uploads
Kein Konto

Ihr Browser-Tool wird geladen…

Was Viewport-Größe prüfen macht

Webdesigner, QA-Tester und alle, die einen Layoutfehler melden, brauchen dieselbe Angabe: wie breit der Seitenbereich des Browsers gerade ist. Die Hauptangabe zeigt ihn in CSS-Pixeln, der Einheit, die Media Queries verwenden, und ändert sich live, während Sie am Fensterrand ziehen.

Die Tabelle trennt die Größe mit und ohne Scrollleisten, sodass Sie sehen, wenn eine vertikale Scrollleiste 15 oder 17 Pixel belegt. Sie zeigt außerdem den visuellen Viewport und den Pinch-Zoom-Faktor für Smartphones und nennt den Breakpoint-Bereich vom Smartphone bis zum breiten Desktop. Für den ganzen Bildschirm statt des Fensters verwenden Sie den Bildschirmauflösungs-Check.

Beispiel

Ihre Umgebung

Chrome auf einem MacBook, Fenster 1440 CSS-Pixel breit, Overlay-Scrollleisten, Gerätepixelverhältnis 2

Der Bericht zeigt

Ihr Viewport: 1440 × 813
CSS-Pixel · Extra groß (1280–1535 px, Desktop)
Breite der Scrollleiste: 0 px
Viewport in Gerätepixeln: 2880 × 1626

macOS blendet Scrollleisten erst beim Scrollen ein, daher nehmen sie keine Breite ein. Unter Windows zeigt dasselbe Fenster meist eine Scrollleiste von etwa 15 px.

Anleitung: Viewport-Größe prüfen

Öffnen Sie die Seite in dem Browser und Fenster, das Sie messen möchten.
Ändern Sie die Fenstergröße und beobachten Sie, wie sich Größe und Breakpoint aktualisieren.
Klicken Sie auf „Kopieren“, um die Werte in einem Fehlerbericht weiterzugeben.

Gut zu wissen

Die Breakpoint-Namen folgen gängigen Standardwerten bei 640, 768, 1024, 1280 und 1536 px. Das CSS Ihrer eigenen Website kann bei anderen Breiten das Layout wechseln.
Gemessen wird der Seitenbereich, nicht das äußere Fenster mit Tabs und Symbolleiste. Angedockte Entwicklertools nehmen dem Viewport ebenfalls Platz weg.
Der Browser-Zoom ändert den Viewport in CSS-Pixeln: Ein 1440 px breites Fenster meldet bei 125 % Zoom 1152 px.

Fragen zu Viewport-Größe prüfen

Wie groß ist mein Browserfenster?

Die Hauptangabe zeigt den Seitenbereich dieses Fensters in CSS-Pixeln, die Breite zuerst. Das ist die Größe, die Webseiten sehen, und die Größe, die eine Tab-Aufnahme erfasst. Ändern Sie die Fenstergröße, ändert sich die Zahl sofort.

Was ist der Unterschied zwischen Viewport und Bildschirmauflösung?

Die Bildschirmauflösung betrifft das ganze Display. Der Viewport ist nur der Teil des Browserfensters, in dem die Seite dargestellt wird, ohne Adressleiste, Tabs und Fensterrahmen. Auf einem Laptop ist der Viewport meist einige hundert Pixel niedriger als der Bildschirm.

In welchen Viewport-Größen sollte ich meine Website testen?

Decken Sie eine Smartphone-Breite um 375 bis 430 px ab, ein Tablet um 768 px, einen Laptop um 1280 bis 1440 px und einen breiten Desktop mit 1920 px. Prüfen Sie die Breiten knapp unter jedem Ihrer Breakpoints, denn Layouts brechen gern kurz vor dem Umschalten.

Warum ändert sich der Viewport, wenn sich auf meinem Smartphone die Tastatur öffnet?

Bildschirmtastaturen verdecken einen Teil der Seite. Browser verkleinern den visuellen Viewport auf den Bereich, den Sie noch sehen, während der Layout-Viewport oft gleich bleibt; deshalb können fixierte Kopf- und Fußzeilen springen.