Viewport
Was ist der Viewport?
Der Viewport ist der sichtbare Bereich einer Webseite im Browser-Fenster – also das, was der Benutzer ohne Scrollen sehen kann. Die Größe des Viewports hängt vom Gerät und der Browser-Fenstergröße ab: auf einem Desktop-Monitor ist er breit, auf einem Smartphone schmal. Responsive Design dreht sich im Kern darum, Layouts für unterschiedliche Viewport-Größen zu optimieren.
Das Viewport-Meta-Tag
Für mobile Geräte ist das Viewport-Meta-Tag im HTML-Head unverzichtbar. Ohne es rendern viele Browser eine Webseite auf mobilen Geräten so, als wäre sie für einen Desktop-Bildschirm gebaut – stark verkleinert und unlesbar. Das Tag sieht so aus:
<meta name="viewport" content="width=device-width, initial-scale=1">Es teilt dem Browser mit: Nutze die tatsächliche Gerätebreite als Viewport-Breite und zeige die Seite in natürlicher Größe an. Alle modernen WordPress-Themes binden dieses Tag automatisch ein – wer ein eigenes Theme entwickelt, muss es manuell setzen.
Viewport und CSS Media Queries
Media Queries in CSS reagieren auf die Viewport-Breite. Damit wird festgelegt, ab welcher Bildschirmgröße ein anderes Layout greift:
@media (max-width: 768px) {
/* Styles für Smartphones */
}WordPress-Themes definieren eigene Breakpoints – also Schwellenwerte, an denen das Layout umschaltet. Gängige Breakpoints orientieren sich an typischen Gerätegrößen: ~480px für Smartphones, ~768px für Tablets, ~1024px für kleinere Desktops.
Viewport in der WordPress-Entwicklung
Im Gutenberg-Editor kannst du über die Icons oben rechts zwischen Desktop-, Tablet- und Mobilansicht wechseln – das ist eine Vorschau auf unterschiedliche Viewport-Größen. Eine echte Garantie für das Aussehen auf allen Geräten ist das aber nicht: Browser-Zoom, Systemschriftgrößen und Geräte-Pixel-Verhältnisse können das Bild verfälschen. Deshalb bleibt das Testen auf echten Geräten unersetzlich.
