Sprachen

Viewport-Meta-Tag

Was das Viewport-Meta-Tag bewirkt, warum es responsives Design auf Mobilgeräten zum Funktionieren bringt, die korrekte Konfiguration, die Attributreferenz und häufige Fehler.

Erstveröffentlicht: 2. Juli 2026 · Zuletzt aktualisiert: 3. Aug. 2026 · Fortgeschritten
Sprachen
AIVerfasst vonAI v2

Das Viewport-Meta-Tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — weist den Browser an, das Layout-Viewport auf die Breite des Geräts in CSS-Pixeln zu dimensionieren, anstatt auf einen veralteten ~980px-Fallback, den einige mobile Browser verwenden. Ohne dieses Tag können Telefone die Seite mit diesem breiteren Fallback rendern und verkleinern, was zu winzigem Text, horizontalem Scrollen und responsiven Breakpoints führt, die möglicherweise nicht wie beabsichtigt greifen. Es ist selbst kein Ranking-Faktor, aber sein Vorhandensein ist eines der Dinge, die Google als Hinweis auf Mobilfreundlichkeit dokumentiert, und sein Fehlen ist ein klassischer Fehler bei der mobilen Benutzerfreundlichkeit. Erzwingen Sie niemals user-scalable=no oder ein restriktives maximum-scale — dies verstößt gegen die W3C-Konformitätsregel für Zoom und kann Benutzer mit Sehschwäche aussperren, obwohl Browser dies überschreiben können (iOS 10+ ignoriert es standardmäßig). Testen Sie es mit Lighthouse oder PageSpeed Insights: Der Mobile-Usability-Bericht der Search Console und der Mobile-Friendly-Test wurden am 1. Dezember 2023 eingestellt.

TL;DR — Das Viewport-Meta-Tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — weist den Browser an, das Layout-Viewport auf die Breite des Geräts in CSS-Pixeln zu setzen, anstatt auf einen veralteten ~980px-Fallback, den einige mobile Browser verwenden. Dadurch können responsive CSS-Media-Queries auf Mobilgeräten gegen die tatsächliche Breite des Geräts ausgewertet werden. Fehlt es oder ist es falsch konfiguriert, ist das ein klassischer Mobile-Usability-Fehler (winziger Text, horizontales Scrollen). Es ist kein Ranking-Faktor — Google dokumentiert seine Präsenz als eines der Dinge, die seine Mobile-Freundlichkeits-Bewertung prüft, und nicht mehr. Erzwingen Sie niemals user-scalable=no / restriktive maximum-scale: Das verstößt gegen die W3C-ACT-Zugänglichkeitsregel für Zoom, obwohl Browser-Overrides existieren (iOS 10+ ignoriert es standardmäßig). Google und Bing empfehlen das identische Tag. Testen Sie mit Lighthouse / PageSpeed Insights — der Mobile-Usability-Bericht in der Search Console und der Mobile-Friendly-Test wurden am 1. Dezember 2023 eingestellt.

Evidence for this claim The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Scope: Browser viewport behavior. Confidence: high · Verified: MDN: Viewport meta tag Evidence for this claim Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Scope: WCAG resize-text requirement and viewport guidance. Confidence: high · Verified: W3C WAI: Understanding Resize Text

Das Problem, das es löst: das virtuelle ~980px-Viewport

Um das Tag zu verstehen, müssen Sie verstehen, was es überschreibt. Als mobile Browser neu waren, bedeutete das Fehlen eines Viewport-Tags, dass einige von ihnen auf eine feste Layoutbreite von ungefähr 980px zurückfielen und in dieser Größe renderten — eine bewusste Anpassung, damit desktopgroße, prä-responsive Websites auf frühen Smartphones nicht völlig kaputt gingen. Der Browser skalierte das Ergebnis dann auf den physischen Bildschirm herunter. MDNs eigene Formulierung: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” — (Übersetzung) „Wenn die Website nicht für kleine Viewports ausgelegt ist und dieses Tag weggelassen wird, rendern einige mobile Browser die Website mit einer festen anfänglichen Containing-Block-Breite, typischerweise 980px.“ — es ist ein browserspezifischer Fallback, keine universelle Spezifikationskonstante.

Die Konsequenz, in Googles eigenen Worten: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.” — (Übersetzung) „Ohne ein Viewport-Meta-Tag rendern mobile Geräte Seiten mit typischen Desktop-Bildschirmbreiten und skalieren sie dann herunter, was sie schwer lesbar macht.“ Sie erhalten unlesbaren Text, erzwungenes Pinch-Zoomen und horizontales Scrollen — die Lehrbuchsymptome einer Seite, die als „nicht mobilfreundlich“ markiert ist.

Das Setzen des Tags “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” — (Übersetzung) „ermöglicht es Ihnen, die Breite und Skalierung des Viewports zu steuern, sodass es auf allen Geräten korrekt dimensioniert ist.“

Layout-Viewport vs. visuelles Viewport (unter der Haube)

Zwei „Viewports“ sind im Spiel, und es lohnt sich, sie auseinanderzuhalten:

  • Das Layout-Viewport ist der Bereich, in den die Seite layoutet und an den fest positionierte Elemente gebunden sind. width=device-width setzt dies auf die Bildschirmbreite des Geräts in CSS-Pixeln.
  • Das visuelle Viewport ist das, was der Benutzer gerade sieht — es ändert sich, wenn er per Pinch zoomt. Zoomen ändert das visuelle Viewport, ohne das Layout-Viewport zu ändern.

Der Grund, warum das für SEO und CSS wichtig ist: Ihre responsiven Media-Queries (@media (max-width: 600px) und ähnliche) werden gegen das Layout-Viewport ausgewertet. Wenn das Layout-Viewport aufgrund eines fehlenden Viewport-Tags bei einem veralteten ~980px-Fallback hängen bleibt, kann ein Telefon Ihre Desktop-Breakpoints statt Ihrer schmalen Breakpoints treffen. MDN formuliert es deutlich: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” — (Übersetzung) „Ohne es funktioniert Ihr responsives Design mit Breakpoints und Media-Queries auf mobilen Browsern möglicherweise nicht wie beabsichtigt.“ Das Tag ist das, was device-width zum Layout-Viewport macht, sodass Ihre beabsichtigten Breakpoints korrekt ausgewertet werden.

Evidence for this claim Without an appropriate viewport hint, narrow responsive breakpoints may not match as intended against the wider virtual layout viewport; it is too absolute to say CSS media queries never fire. Scope: production HTML and HTTP responses Confidence: high · Verified: Responsive web design

Das korrekte Tag und wo es platziert wird

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ...the rest of your head... -->
</head>

Platzieren Sie es hoch im <head>, in der Nähe von charset, vor inhaltsabhängigen Tags. Dies ist der Wert, den Google, Bing und Lighthouse alle empfehlen — wörtlich ist es der Fix, den Lighthouse selbst vorschlägt. Überdenken Sie den Wert nicht: width=device-width, initial-scale=1 ist die Antwort für praktisch jede responsive Website.

Attributreferenz

Das content-Attribut ist eine kommagetrennte Liste von Direktiven. MDN ist die kanonische Attribut-für-Attribut-Referenz; hier ist, was jedes tut:

DirektiveWas sie tutHinweise
widthSteuert die (minimale) Pixelbreite des ViewportsEine ganze Zahl 1–10000 oder der Sonderwert device-width (die Bildschirmbreite in CSS-Pixeln). Verwenden Sie device-width.
initial-scaleDas Zoom-Verhältnis zwischen Gerätebreite und Viewport beim LadenEine Zahl 0,0–10,0. Verwenden Sie 1.
minimum-scaleDie minimale Zoomstufe, die erlaubt istMuss ≤ maximum-scale sein. iOS 10+ ignoriert sie standardmäßig.
maximum-scaleDas maximale Hineinzoomen, das erlaubt istMuss ≥ minimum-scale sein. iOS 10+ ignoriert sie standardmäßig. Beschränken Sie sie nicht.
user-scalableOb der Benutzer zoomen kann (yes/no, Standard yes)iOS 10+ ignoriert sie standardmäßig. no zu setzen ist ein Accessibility-Anti-Pattern – lassen Sie es.
interactive-widgetWie interaktive UI (z. B. virtuelle Tastaturen) den Viewport beeinflussenWerte: resizes-visual (Standard), resizes-content, overlays-content. Neuer; die meisten SEO-Inhalte lassen es aus.
viewport-fitWie der Viewport mit Display-Ausschnitten (Notches) umgehtWerte: auto (Standard), contain (passt in das größte Rechteck, das den Ausschnitt vermeidet), cover (füllt das Display – kombinieren Sie mit CSS-env()-Safe-Area-Inset-Variablen, damit Inhalte nicht unter dem Ausschnitt landen).

viewport-fit und interactive-widget sind beides Browser-Layout-Randfälle – Display-Ausschnitt- bzw. virtuelle-Tastatur-Behandlung – keine SEO-Direktiven; die meisten SEO-orientierten Leitfäden überspringen sie vollständig.

Eine kleine, aber reale Falle aus Lighthouses eigener Dokumentation: initial-scale unter 1 zu setzen kann ein veraltetes Doppeltipp-Zoom-Verhalten auslösen, das Interaktionsverzögerung hinzufügt – ein weiterer Grund, bei initial-scale=1 zu bleiben, anstatt kreativ zu werden.

Zoomen niemals deaktivieren: user-scalable=no ist ein Anti-Pattern

Sie werden user-scalable=no (oder maximum-scale=1) immer noch in alten Theme-Boilerplates finden, meist von einem Entwickler, der nicht wollte, dass Pinch-Zoom “sein” Layout “durcheinanderbringt”. Das ist aus zwei Gründen falsch:

  1. Es besteht den eigenen Accessibility-Konformitätstest des Webs für Zoom nicht und es arbeitet gegen die Absicht von WCAG. Die ACT-Regel des W3C “Meta viewport allows for zoom” (Regel b4f0c3) gilt für jedes Viewport-Tag, das user-scalable oder maximum-scale setzt, und ihre Erwartung ist explizit: Das Tag darf nicht user-scalable=no setzen, und maximum-scale darf nicht unter 2 gesetzt werden. (Die Regel enthält genannte Annahmen – sie gilt nicht, wenn die Seite keinen sichtbaren Inhalt hat, eine andere Möglichkeit bietet, Text zu vergrößern, oder nie über einen 320×256-CSS-Pixel-Bereich hinaus umfließen muss – aber eine typische responsive Seite erfüllt diese Ausnahmen nicht.) Laut MDN: “Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.” (Übersetzung) „Das Deaktivieren der Zoom-Fähigkeiten durch Setzen von user-scalable auf no verhindert, dass Menschen mit Sehbehinderungen Seiteninhalte lesen und verstehen können. Darüber hinaus verlangt WCAG eine Mindestskalierung von 2×; die bewährte Praxis ist jedoch, einen 5×-Zoom zu ermöglichen.“ Das Blockieren von Zoom sperrt genau die Benutzer aus, die es am meisten brauchen.
  2. Es ist auch browserspezifisch, nicht universell. iOS Safari 10 und später ignorieren user-scalable=no und restriktive maximum-scale standardmäßig – das ist eine iOS- Überschreibung, keine Änderung an der ACT-Regel oder an der Absicht von WCAG. Auf einem großen Teil des mobilen Traffics bewirkt die Einstellung also nichts, während sie auf Browsern, die sie doch noch berücksichtigen (ältere Android-WebViews, einige In-App-Browser), aktiv den Accessibility-Test oben nicht besteht. Null Vorteil, echter Nachteil – und behandeln Sie “iOS ignoriert es” nicht als Beweis, dass das Markup überall zugänglich ist.
Evidence for this claim `user-scalable=no` and `maximum-scale` below 2 fail the cited ACT rule's expectation under its assumptions, and disabling zoom harms low-vision users; an automated ACT failure is not by itself a complete universal WCAG conformance determination. Scope: production HTML and HTTP responses Confidence: high · Verified: Viewport meta tag

Die Regel ist einfach: Fassen Sie den Zoom nicht an. width=device-width, initial-scale=1 und sonst nichts.

Ist es ein Ranking-Faktor?

Seien Sie hier präzise, denn viele SEO-Inhalte übertreiben es. Hier ist genau, was Google dokumentiert, und wo die Grenze zur Brancheninferenz liegt.

Was Google dokumentiert: Das Viewport-Tag ist kein direkter Ranking-Faktor. Googles eigene Dokumentation zu unterstützten Meta-Tags sagt klar, dass “das Vorhandensein dieses Tags Google signalisiert, dass die Seite mobilfreundlich ist” — das ist die gesamte dokumentierte Aussage: Das Vorhandensein signalisiert Mobilfreundlichkeit. Google dokumentiert das Tag nicht als bewertet, als Rendering-Garantie oder als Beweis, dass das responsive Design einer Seite tatsächlich gut ist.

Evidence for this claim Google documents that viewport-meta presence indicates a page is mobile friendly, but that statement does not establish that the tag itself is a ranking factor, a display guarantee or sufficient evidence of responsive quality. Scope: production HTML and HTTP responses Confidence: high · Verified: Meta tags and attributes that Google supports

Wo Praktiker die Punkte verbinden (Brancheninferenz, kein Google-Zitat): Ein fehlendes oder falsch konfiguriertes Viewport-Tag ist eine häufige Ursache für die Probleme bei der mobilen Nutzbarkeit (winziger Text, horizontales Scrollen, unbrauchbare Tap-Ziele), von denen SEOs allgemein verstehen, dass sie die mobile Seitenerfahrung verschlechtern. Dieser Zusammenhang ist vernünftig und in der Branche weit verbreitet, aber es ist eine Praktiker-Inferenz darüber, warum das Tag wichtig ist — nicht etwas, das Googles Dokumentation als Ranking-Kette darstellt.

Also der ehrliche Rahmen: Das Tag selbst wird nicht bewertet, und beheben Sie es, weil eine Seite ohne es auf Telefonen schlecht rendert — nicht weil Google es als Ranking-Hebel dokumentiert, direkt oder indirekt. Halten Sie dies auch getrennt vom Mobile-First-Indexing: Das ist ein eigenes Google-Search-Konzept darüber, welche Version Ihrer Seite Google hauptsächlich für Indexierung und Ranking verwendet; das Viewport-Tag geht darum, wie dieses mobile HTML in einem Browser rendert, Punkt.

Evidence for this claim Mobile-first indexing means Google primarily uses the mobile content for indexing and ranking; it is a separate Google Search concept from the browser's viewport rendering contract. Scope: production HTML and HTTP responses Confidence: high · Verified: Mobile-first indexing best practices

So testen Sie es — die Tools haben sich 2023 geändert

Hier sind die meisten älteren Anleitungen veraltet. Am 1. Dezember 2023 hat Google die Mobile-Usability-Berichte der Search Console, das Mobile-Friendly-Test-Tool und die Mobile-Friendly-Test-API eingestellt (angekündigt im April 2023, bestätigt abgeschlossen im Dezember). Googles Begründung war, dass andere Tools ausgereift waren — “viele andere robuste Ressourcen zur Bewertung der mobilen Nutzbarkeit sind entstanden, darunter Lighthouse von Chrome.” Wenn Ihnen also ein Tutorial sagt, Sie sollen Search Console → Mobile Usability öffnen, um Ihr Viewport zu überprüfen, existiert dieser Bericht nicht mehr.

Schichten Sie diese Prüfungen, anstatt sich auf ein Tool zu verlassen: Bestätigen Sie, dass das Tag im rohen ausgelieferten HTML existiert (nicht nur nachdem JavaScript läuft), bestätigen Sie, dass Ihre responsiven Breakpoints tatsächlich bei Telefonbreiten greifen, testen Sie das Zoomen auf 200 %, ohne dass das Layout bricht (das Resize-Verhalten, um das es bei der WCAG- Absicht geht), und stichprobenartig in mehr als einem Browser — ein iOS-Safari-only-Check kann einen Zoom-Beschränkungsfehler verbergen, den Android- oder In-App-Browser weiterhin durchsetzen.

Ihr aktuelles Toolkit:

  • Lighthouse (in Chrome DevTools). The relevant audit historically read “Does not have a <meta name="viewport"> tag with width or initial-scale” — it fails unless the <head> has a meta name="viewport" whose content includes width=. As of Lighthouse 13 it’s folded into the “Optimize viewport for mobile” insight.
  • PageSpeed Insights — runs Lighthouse plus field Core Web Vitals data.
  • Chrome DevTools device toolbar — emulate phone dimensions and eyeball it.
  • Bing’s Mobile Friendliness Test Tool — Bing checks viewport and zoom-control configuration too, and recommends the same tag Google does.
  • View source / real-device check — sometimes the fastest test is to just look at the <head> on your phone.

Häufige Fehler

  • Überhaupt kein Tag (“viewport not set”) — die Seite rendert in der alten, desktop-ähnlichen Breite und schrumpft.
  • Eine fest codierte Pixelbreite wie width=1024 statt device-width — ein Tag existiert, aber es passt die Seite trotzdem nicht an das Gerät an. Lighthouse und echte Mobilfreundlichkeit wollen beide einen brauchbaren width=-Wert, nicht nur irgendein Tag.
  • initial-scale unter 1 — kann die alte Doppeltipp-Zoom-Verzögerung auslösen.
  • user-scalable=no / restriktives maximum-scale — aus altem Boilerplate kopiert; Accessibility-Anti-Pattern, wird auf iOS ohnehin ignoriert.

Wo dies in der breiteren mobilen Arbeit steht – Konfiguration, Content-Parität, Geschwindigkeit – finden Sie im Mobile-SEO-Hub, der Mobile-SEO-Checkliste und Mobile-First-Indexing. Für das Tag selbst als Teil der breiteren On-Page-Tag-Familie ist der Meta-Tags-Cluster die Karte.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.