Der Viewport ist der aktuell sichtbare Bereich einer Webseite im Browser und bestimmt, wie viel Inhalt ohne Scrollen angezeigt wird.
Responsive Gestaltung richtet sich am verfügbaren Viewport aus, nicht pauschal an einzelnen Gerätemodellen.
- ✓Viewport und physische Bildschirmgröße sind nicht identisch.
- ✓Browserleisten und Zoom verändern den sichtbaren Bereich.
- ✓CSS-Pixel bilden die Grundlage responsiver Layouts.
- ✓Die Meta-Viewport-Angabe ist für mobile Darstellung wichtig.
- ✓Layouts sollten zwischen Breakpoints flexibel bleiben.
Was bedeutet Viewport?
Der Layout-Viewport ist die Fläche, auf die eine Webseite ihr Layout berechnet. Breite und Höhe ändern sich durch Fenstergröße, Ausrichtung und Browseroberfläche.
Wie wird Viewport eingesetzt?
CSS passt Komponenten mit flexiblen Größen, Media Queries und Container-Regeln an den verfügbaren Raum an. Mobile Browser berücksichtigen zusätzlich die Viewport-Konfiguration.
Bereich, für den das Seitenlayout berechnet wird.
Tatsächlich sichtbarer Ausschnitt, etwa bei Zoom oder Tastatur.
Schwellen für gezielte Layout-Anpassungen.
Steuert die mobile Anfangsdarstellung.
Praxis und Einordnung
Eine Kartenansicht wechselt bei wenig Platz von drei Spalten zu einer Spalte, ohne Text abzuschneiden oder horizontales Scrollen zu erzwingen.
Nur drei feste Gerätegrößen zu testen reicht nicht. Inhalte müssen auch bei Zwischenbreiten, Zoom und größerer Schrift funktionieren.
Sinnvolle Umsetzung
Empfohlener Ablauf
-
1
Inhalt priorisieren
Festlegen, was bei wenig Raum zuerst sichtbar bleibt.
-
2
Flexibel bauen
Relative Größen und robuste Komponenten verwenden.
-
3
Breakpoints setzen
Am Layoutbruch statt an Geräten ausrichten.
-
4
Breiten testen
Viele Zwischenstufen und Ausrichtungen prüfen.
-
5
Zugänglichkeit prüfen
Zoom, Schriftvergrößerung und Tastatur einbeziehen.
Viewport-Tests jenseits fester Geräte
Responsive Qualität zeigt sich auch bei Zwischenbreiten, Zoom, eingeblendeter Tastatur und vergrößerter Schrift. Breakpoints sollten dort entstehen, wo Inhalt und Bedienung tatsächlich umbrechen, nicht anhand einzelner Gerätemodelle.
Layout- und Visual-Viewport
Der Layout-Viewport bestimmt die Berechnung des Seitenaufbaus; der sichtbare Ausschnitt kann sich durch Zoom oder Bildschirmtastatur zusätzlich verändern. Flexible Komponenten müssen beide Situationen robust auffangen.
Häufig gestellte Fragen
Häufige Fragen
Was ist ein Viewport?+
Der aktuell sichtbare beziehungsweise für das Layout verwendete Browserbereich.
Ist der Viewport der Bildschirm?+
Nein, Browseroberfläche, Zoom und Fenstergröße können ihn verkleinern.
Was macht Meta Viewport?+
Es konfiguriert die mobile Darstellung und Skalierung.
Was sind Breakpoints?+
Breiten, an denen ein Layout gezielt angepasst wird.
Warum entstehen horizontale Scrollbalken?+
Oft durch starre oder zu breite Elemente außerhalb des Viewports.
