# Viewport-Meta-Tag

Kategorie: [Technisches SEO](https://seo-geo-glossary.com/de/glossar/kategorie/technisches-seo/) › [HTML, Mobile & Barrierefreiheit](https://seo-geo-glossary.com/de/glossar/kategorie/technisches-seo/html-mobile-barrierefreiheit/) · Auch genannt: Meta Viewport

Das **Viewport-Meta-Tag** (`<meta name="viewport">`) gibt Browsern Hinweise, wie sie den sichtbaren Bereich einer Seite dimensionieren und skalieren sollen, vor allem auf Smartphones. Ohne das Tag rendern mobile Geräte die Seite in Desktop-Breite und skalieren sie herunter.

## Wichtige Werte
Die gängige Angabe lautet `width=device-width, initial-scale=1`. MDN beschreibt `width=device-width` als Weg, die virtuelle Viewport-Breite (zum Beispiel 980 px) an die Gerätebreite anzupassen. Erst dann greifen Media Queries wie vorgesehen.

Weitere Werte sind `minimum-scale`, `maximum-scale`, `viewport-fit` für Displays mit Aussparung und `interactive-widget` für das Verhalten bei eingeblendeter Tastatur. Mit `user-scalable=no` lässt sich das Zoomen abschalten. MDN rät davon ab, weil es WCAG 1.4.4 (Textgröße ändern) verletzt und Menschen mit Sehschwäche ausschließt.

## Wie prüft man es?
Der Lighthouse-Test besteht, wenn im `<head>` ein Viewport-Tag mit einem `content`-Attribut steht, das `width=` enthält. Bei einem `initial-scale` unter 1 aktiviert der Browser laut Lighthouse die Doppeltipp-Zoom-Erkennung und verzögert jeden Tap um 300 Millisekunden.

## Beispiel
```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

## Häufige Fehler
- Das Tag fehlt, sodass Smartphones die Desktop-Breite herunterskalieren.
- Zoomen ist mit `user-scalable=no` gesperrt.
- `initial-scale` steht unter 1 und löst die Tap-Verzögerung aus.

## Verwandte Begriffe

- [Meta Robots Tag](https://seo-geo-glossary.com/de/glossar/meta-robots-tag/index.md)
- [Meta Refresh](https://seo-geo-glossary.com/de/glossar/meta-refresh/index.md)
- [Responsive Design](https://seo-geo-glossary.com/de/glossar/responsive-design/index.md)
- [Mobilfreundlichkeit](https://seo-geo-glossary.com/de/glossar/mobilfreundlichkeit/index.md)
- [WCAG](https://seo-geo-glossary.com/de/glossar/wcag/index.md)

## Quellen

- [<meta name="viewport"> – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Document has a viewport meta tag – Lighthouse, Chrome for Developers](https://developer.chrome.com/docs/lighthouse/pwa/viewport)
- [Best Practices für mobile Websites und die Mobile-First-Indexierung – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing?hl=de)

---

Stand: 7. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/viewport-meta-tag/