Was ist der Viewport?
Stell dir vor, du schaust durch ein Fenster auf eine riesige Landkarte. Das Fenster ist begrenzt, die Karte ist viel größer. Was du gerade siehst, ist der Viewport — der sichtbare Ausschnitt. Wenn du das Fenster größer machst, siehst du mehr von der Karte. Wenn du näher heranrückst, siehst du Details. Genau so funktioniert der Viewport im Browser: Er ist das "Fenster", durch das der Besucher deine Website sieht.
Auf dem Desktop ist der Viewport identisch mit dem Browserfenster. Wer das Fenster verkleinert oder vergrößert, ändert den Viewport entsprechend. Auf dem Handy ist es komplizierter — und genau dort wird der Viewport zum kritischen Konzept.
Smartphones haben eine sogenannte CSS-Pixel-Auflösung, die nicht der echten Pixelzahl entspricht. Ein iPhone hat zum Beispiel 1170 echte Pixel Breite, aber nur 390 CSS-Pixel — die anderen werden für die hohe Pixeldichte (Retina) genutzt. Wenn du in CSS von "768 Pixel Breite" sprichst, meinst du CSS-Pixel, nicht Hardware-Pixel. Der Viewport ist die Brücke zwischen beiden.
Der Viewport-Meta-Tag — die wichtigste Zeile für Mobile
Ohne diesen Tag im deiner HTML-Seite weiß der Mobile-Browser nicht, dass deine Seite Mobile-tauglich ist. Was passiert dann? Er nimmt einen Standard-Viewport von 980 Pixeln Breite an, rendert die Desktop-Version in dieser Breite und skaliert sie auf den Handy-Bildschirm runter. Ergebnis: Schrift winzig, Buttons nicht klickbar, Media Queries greifen nicht. Die Seite wirkt wie ein hineingezoomter Druckbogen.
Der Viewport-Meta-Tag löst das Problem. So sieht er aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Website</title>
</head>
<body>
...
</body>
</html>Was die Inhalte bedeuten:
width=device-width— der Viewport soll genauso breit sein wie der Bildschirm des Geräts in CSS-Pixeln. Auf einem iPhone mit 390 CSS-Pixeln sind das 390 Pixel.initial-scale=1.0— die Seite startet ohne Zoom-Stufe. Was 16 Pixel groß ist, wird auch als 16 Pixel gerendert.
Diese eine Zeile ist die Voraussetzung dafür, dass Responsive Design auf Mobile überhaupt funktioniert. Ohne sie ist die ganze Responsive Design-Arbeit umsonst.
Weitere Viewport-Optionen — und warum du sie meistens nicht brauchst
Es gibt noch ein paar weitere Parameter, die du im Viewport-Meta-Tag setzen kannst:
| Option | Was sie macht | Empfehlung |
|---|---|---|
width=device-width | Viewport-Breite = Geräte-Breite | Immer setzen |
initial-scale=1.0 | Startet ohne Zoom | Immer setzen |
minimum-scale=0.5 | Wie weit der Nutzer maximal rauszoomen darf | Selten nötig |
maximum-scale=1.0 | Wie weit der Nutzer maximal reinzoomen darf | Nicht setzen |
user-scalable=no | Verbietet Zoomen komplett | Niemals setzen |
maximum-scale=1.0 und user-scalable=no blockieren das Zoomen für sehbehinderte Menschen. Das ist ein Barrierefreiheits-Verstoß und in der EU mittlerweile rechtlich problematisch. Lass den Nutzer immer zoomen können.
Dynamische Viewport-Einheiten — dvh, svh, lvh
Die klassische Einheit vh (viewport height) hat auf Mobile ein berüchtigtes Problem: Sie ignoriert die ein- und ausblendenden Browser-Bars. Eine Hero-Section mit height: 100vh ist auf iOS Safari plötzlich höher als der sichtbare Bildschirm, sobald die Adressleiste einfährt — und der Button unten verschwindet. Genau dafür gibt es die neuen dynamischen Viewport-Einheiten:
| Einheit | Was sie macht |
|---|---|
svh (small viewport height) | Bezieht sich auf die kleinstmögliche sichtbare Höhe — also mit ausgefahrenen Browser-Bars. Sicher, aber oft zu wenig. |
lvh (large viewport height) | Bezieht sich auf die größtmögliche Höhe — ohne Browser-Bars. Maximal, aber manchmal abgeschnitten. |
dvh (dynamic viewport height) | Passt sich live an, je nachdem welche Bars gerade sichtbar sind. Der Allrounder. |
In der Praxis nutzt du dvh für Sektionen, die exakt den sichtbaren Bereich füllen sollen — zum Beispiel eine Mobile-Hero, die immer perfekt auf den Screen passt, egal ob die Adressleiste gerade ein- oder ausgefahren ist. Für vw gibt es entsprechend svw, lvw, dvw, auch wenn die horizontale Variante seltener gebraucht wird.
Warum ist der Viewport für deine Website wichtig?
Ohne korrekten Viewport-Meta-Tag wirkt deine Website auf dem Handy wie aus dem Jahr 2005 — eine winzig gerenderte Desktop-Version, in der niemand etwas erkennt. Mit korrektem Viewport-Tag und sauberem Responsive Design fügt sich die Seite perfekt in jedes Display ein.
Und das ist nicht nur eine UX-Frage. Google bewertet die "Mobile Usability" einer Seite explizit — eine Seite ohne Viewport-Tag bekommt in der Search Console eine Warnung, fällt im mobilen SEO-Ranking nach hinten und verliert Traffic.
Beispiel aus dem Alltag: Eine Anwaltskanzlei hat eine Website von vor zehn Jahren, gebaut ohne Mobile-Gedanken, ohne Viewport-Tag. Über 60 Prozent der Besucher kommen vom Handy, sehen die Seite winzig zusammengezoomt, springen sofort ab. Eine Stunde Arbeit, ein Viewport-Tag plus drei Media Queries, und die Absprungrate halbiert sich. Genau diese kleinen, technischen Details entscheiden oft mehr als das Design selbst.
Häufige Fehler rund um den Viewport
Viewport-Tag vergessen. Der Klassiker bei alten Websites oder bei selbstgebauten Vorlagen. Folge: Mobile-Version sieht komplett kaputt aus.
Zoom blockiert. Wer user-scalable=no setzt, sperrt sehbehinderte Nutzer aus. Das ist nicht nur unhöflich, sondern verstößt gegen Barrierefreiheitsrichtlinien.
Feste Pixelbreite im Viewport-Tag. Manchmal sieht man sowas wie . Das zwingt den Browser, immer 1024 Pixel breit zu rendern, egal wie groß der Bildschirm ist. Ergebnis: Eine Mini-Desktop-Version auf dem Handy. Genau das, was wir vermeiden wollen.
Verwechslung mit der CSS-Einheit vw. vw (viewport width) ist eine relative Längeneinheit, die sich auf den Viewport bezieht — 1vw = 1 Prozent der Viewport-Breite. Praktisch für flexible Schriften, aber etwas anderes als der Viewport-Meta-Tag.
Fehlende Tests. Ein Viewport-Tag richtig zu setzen ist eine Sache. Auf echten Geräten zu testen, ob Layout, Touch-Bedienung und Performance stimmen, ist eine andere — und wichtigere.