MDN beschreibt den Viewport als den Teil eines Dokuments, der gerade im Browserfenster zu sehen ist, auf dem Smartphone also der Bildschirm [1]. Was außerhalb liegt, erscheint erst, wenn du dorthin scrollst. Auf einem großen Monitor ist der Viewport so breit wie das Browserfenster, auf dem Smartphone im Hochformat nur ein schmaler Streifen. Zoomt jemand mit zwei Fingern in die Seite hinein, wird der sichtbare Ausschnitt kleiner. MDN nennt diesen Ausschnitt den visuellen Viewport, während der Layout-Viewport, nach dem die Seite angeordnet wird, gleich bleibt [1].
Das Viewport-Meta-Tag
Auf dem Smartphone braucht der Viewport eine Anweisung. Ohne sie stellen mobile Browser eine Seite mit einer Desktop-Breite dar, laut web.dev meist etwa 980 Pixel, und verkleinern sie dann auf den Bildschirm [3]. Schrift wird winzig, und Besucher müssen zoomen. Abhilfe schafft eine Zeile im Kopf der Seite: <meta name="viewport" content="width=device-width, initial-scale=1">. Die Angabe width=device-width lässt die Seite die Breite des Geräts übernehmen, initial-scale=1 setzt das Verhältnis von CSS-Pixeln zu geräteunabhängigen Pixeln auf eins zu eins, auch wenn das Gerät gedreht wird [3]. Der Inhalt wird dann laut web.dev passend zur Bildschirmbreite neu umbrochen [3]. Das ist die Voraussetzung für Responsive Webdesign, bei dem sich eine Seite an jede Breite anpasst.
Das Tag kennt weitere Werte. MDN führt unter anderem height, minimum-scale, maximum-scale und user-scalable auf, dazu interactive-widget für das Verhalten bei eingeblendeter Bildschirmtastatur und viewport-fit, das festlegt, welcher Teil der Seite sichtbar ist [2]. Lighthouse meldet laut web.dev, wenn ein Viewport-Tag mit width oder initial-scale fehlt [3]. Wo das Tag zwischen den übrigen Angaben im Kopf steht, erklärt der Eintrag Meta-Tag.
Zoomsperren und Barrierefreiheit
Manche Vorlagen setzen user-scalable=no oder ein maximum-scale von 1, damit das Layout beim Zoomen nicht verrutscht. MDN warnt davor: Wer das Zoomen abschaltet, nimmt Menschen mit eingeschränktem Sehvermögen die Möglichkeit, den Inhalt zu lesen. Die WCAG verlangen mindestens eine Vergrößerung auf das Doppelte, als gute Praxis nennt MDN das Fünffache [2]. Auch web.dev rät von minimum-scale, maximum-scale und user-scalable ab, weil sie das Zoomen einschränken [3]. Mehr zum Thema steht unter Barrierefreiheit.
Ein zweiter Fehler sind Inhalte, die breiter sind als der Viewport. Ein Bild mit fester Breite von 1.200 Pixeln oder eine breite Tabelle zwingt Besucher, seitlich zu scrollen. web.dev empfiehlt für Bilder max-width: 100 Prozent und Layouts ohne feste Pixelbreiten [3]. Wie du die Darstellung auf dem Smartphone prüfst, beschreibt die Antwort Wie teste ich die mobile Darstellung?, weitere Prüfpunkte nennt der Eintrag mobile Optimierung.
Deine Seite sieht auf dem Handy winzig aus oder lässt sich nicht vergrößern? Darüber sprechen wir in der gratis Sprechstunde.
- Organisation Viewport (Glossary). MDN Web Docs (Mozilla). Stand 19.11.2025. abgerufen am 31.10.2026
- Organisation meta name="viewport". MDN Web Docs (Mozilla). Stand 23.09.2026. abgerufen am 31.10.2026
- Organisation Responsive web design basics (Pete LePage, Rachel Andrew). web.dev (Google). Stand 12.02.2019. abgerufen am 31.10.2026
Häufige Fragen
Was ist der Viewport einfach erklärt?
Der Teil einer Webseite, der gerade auf dem Bildschirm zu sehen ist. Alles andere erscheint erst beim Scrollen.
Welches Viewport-Tag sollte auf jeder Seite stehen?
Üblich ist meta name="viewport" mit content="width=device-width, initial-scale=1". Damit übernimmt die Seite die Breite des Geräts.
Darf ich das Zoomen mit user-scalable=no sperren?
Davon raten MDN und web.dev ab. Menschen mit eingeschränktem Sehvermögen können den Inhalt sonst nicht vergrößern, und die WCAG verlangen mindestens eine Vergrößerung auf das Doppelte.
Was passiert ohne Viewport-Tag?
Mobile Browser stellen die Seite meist mit einer Desktop-Breite von etwa 980 Pixeln dar und verkleinern sie. Text wird klein, und Besucher müssen zoomen.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
