Was ist der Viewport?
Du öffnest eine Website auf dem Handy und musst erst mit zwei Fingern reinzoomen, um überhaupt etwas zu lesen? Dann stimmt mit dem Viewport etwas nicht.
Der Viewport ist der Teil einer Seite, der im Browserfenster gerade zu sehen ist. Die Entwickler-Doku von Mozilla (MDN) sagt es knapp: der aktuell sichtbare Teil des Dokuments. Alles darüber und darunter liegt außerhalb und kommt erst beim Scrollen ins Bild. Browserleisten zählen nicht dazu.
Genau genommen gibt es zwei Viewports. Der Layout-Viewport ist die Fläche, nach der der Browser die Seite anordnet. Der visuelle Viewport ist das, was du tatsächlich siehst. Er wird kleiner, wenn du zoomst oder die Bildschirmtastatur aufklappt.
Der Viewport-Meta-Tag: eine Zeile, große Wirkung
Ohne Anweisung tun Mobilbrowser so, als wären sie ein Desktop. Sie legen die Seite in einer virtuellen Breite an, laut Google meist rund 980 Pixel, und schrumpfen das Ergebnis dann aufs Display. Lesbar ist das nicht.
Die Lösung ist eine Zeile im Kopf jeder Seite. Google empfiehlt in Lighthouse und auf web.dev diesen Tag: meta name="viewport" mit dem Inhalt width=device-width, initial-scale=1. Übersetzt: Nimm die echte Breite des Geräts und starte ohne Zoom.
Ohne diese Zeile greifen auch deine Media Queries nicht, also die Regeln, mit denen sich ein Layout an kleine Bildschirme anpasst. MDN bringt es auf den Punkt: Legt der Browser die Seite mit 980 Pixeln an, kommen Regeln für 640 oder 480 Pixel nie zum Zug. Kein Viewport-Tag, kein Responsive Design.
Die gute Nachricht: Fast jede Seite hat ihn inzwischen. Laut HTTP Archive Web Almanac bestanden 2024 94 % der mobilen Seiten den Lighthouse-Check auf einen Viewport-Tag. WordPress-Themes bringen ihn in aller Regel von selbst mit.
Welche Viewport-Breiten zählen in Deutschland?
Rund 60 % aller Seitenaufrufe in Deutschland kommen vom Smartphone (StatCounter, September 2026). Die häufigsten Handy-Bildschirme, wie Browser sie melden:
Breite × Höhe
Anteil
414 × 896
13,4 %
384 × 832
11,1 %
393 × 873
10,1 %
390 × 844
5,6 %
360 × 780
4,5 %
Die Werte schwanken von Monat zu Monat, die Größenordnung bleibt: Teste deine Seite zwischen 360 und 430 Pixeln Breite. Am Desktop dominiert 1920 × 1080 mit gut einem Drittel der Aufrufe.
Beispiele aus der Praxis
Case A · Handwerksbetrieb
Alte Website ohne Viewport-Tag
~60 %
Aufrufe vom Handy
980 px
angelegte Breite ohne Tag
Seite erscheint auf rund 400 Pixel geschrumpft
Mehr als die Hälfte der Besucher müsste zoomen, um die Telefonnummer zu lesen. Die eine Zeile im Kopf löst das sofort — sofern das Layout dahinter responsiv ist.
Case B · Onlineshop
Zoom gesperrt „fürs saubere Design“
23 %
Mobilseiten mit Zoom-Sperre
200 %
Zoom, den WCAG verlangt
Sperre raus — sie schadet und wirkt auf dem iPhone ohnehin nicht
Anteil laut Web Almanac 2024. Seit iOS 10 ignoriert Safari die Zoom-Sperre standardmäßig.
Häufige Fehler
Fehler 1 · Zoomen sperren
Mit user-scalable=no oder maximum-scale=1 im Tag kann niemand mehr vergrößern. Das trifft Menschen mit Sehschwäche und verstößt gegen die Barrierefreiheits-Richtlinien WCAG, die mindestens doppelte Vergrößerung verlangen. Laut Web Almanac 2024 machen das trotzdem 23 % der mobilen Seiten. Raus damit.
Fehler 2 · Feste Breite statt Gerätebreite
Ein Tag mit width=600 oder einem initial-scale unter 1 ist kaum besser als gar keiner. Bei einem Startzoom unter 1 kann laut Google zudem jeder Tipp um 300 Millisekunden verzögert werden, weil der Browser auf einen Doppeltipp wartet.
Fehler 3 · Volle Höhe, die über den Rand ragt
Ein Startbereich mit „100 % der Viewport-Höhe“ (100vh) rechnet mit eingefahrener Browserleiste. Beim Laden ragt er deshalb unten heraus — der Button verschwindet aus dem Bild. Die neueren Einheiten svh und dvh lösen das; sie laufen seit 2022 in allen großen Browsern.
So prüfst du deinen Viewport
- Quelltext: Strg + U und nach „viewport“ suchen. Steht da width=device-width, passt die Basis.
- Gerätemodus: In den Entwicklertools von Chrome, Firefox oder Safari kannst du typische Handybreiten einstellen.
- Lighthouse oder PageSpeed Insights: melden einen fehlenden oder falschen Viewport-Tag.
- GA4: zeigt dir unter „Technologie“, mit welchen Bildschirmgrößen deine eigenen Besucher kommen.
Häufige Fragen
Was gehört in den Viewport-Meta-Tag?
Für fast jede Website reicht width=device-width, initial-scale=1. Der Tag steht im head-Bereich der Seite. Angaben wie maximum-scale oder user-scalable lässt du weg.
Muss ich den Viewport-Tag in WordPress selbst eintragen?
In aller Regel nicht — aktuelle Themes wie Hello Elementor setzen ihn von selbst. Prüf es trotzdem einmal im Quelltext oder mit Lighthouse, vor allem bei älteren oder selbst gebauten Themes.
Darf ich das Zoomen auf dem Handy verhindern?
Solltest du nicht. Es schließt Menschen mit Sehschwäche aus und widerspricht den WCAG-Richtlinien. Auf dem iPhone ignoriert Safari die Sperre seit iOS 10 ohnehin.
Welche Viewport-Breiten sollte ich testen?
Für Deutschland deckst du mit 360 bis 430 Pixeln den Großteil der Smartphones ab, dazu Tablet-Breiten und 1920 Pixel am Desktop. Wichtiger als Listen sind deine eigenen Daten aus GA4.
Ist der Viewport-Tag ein Rankingfaktor?
Google nennt ihn nicht als eigenen Rankingfaktor. Google empfiehlt aber Responsive Design, und das funktioniert ohne Viewport-Tag nicht. Indirekt hängt die mobile Nutzbarkeit deiner Seite also daran.
Quellen
- MDN Web Docs: Viewport concepts
- MDN Web Docs: meta name="viewport"
- web.dev: Responsive web design basics
- HTTP Archive: Web Almanac 2024, SEO
- HTTP Archive: Web Almanac 2024, Accessibility
- StatCounter: Anteil Mobil, Desktop, Tablet in Deutschland
- StatCounter: Bildschirmauflösungen mobil in Deutschland
- W3C: Understanding WCAG 2.2 – Reflow
