Technik·Claude Code
TechnikClaude Code

Viewport-Meta-Tag setzen — Claude Code

Ohne Viewport-Meta rendern Phones die Seite mit 980px Breite und zoomen raus — Google flaggt als nicht mobile-friendly und stuft ab.

rocket_launch

In Claude Code fixen

Anthropics offizieller Terminal-Coding-Agent

Claude Code kann zuerst den ganzen Codebase greppen, die Änderung planen, dann jede betroffene Datei editieren. Prompt unten in deinen Claude Code-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Claude Code

Diesen Text exakt so in deinen Claude Code-Chat kopieren und einfügen.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

Add viewport meta tag

1. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to <head>.

Warum das wichtig ist

Seit 2016 flaggt Google Sites ohne Viewport-Meta als "nicht mobile-friendly" in Search Console. Seit 2019 heisst Mobile-First-Indexing: Google rankt primär nach Mobile-Version. Kein Viewport = gedeckeltes Mobile-Ranking.

Der Tag sagt dem Browser: rendere in Geräte-Breite, nicht rauszoomen. Ohne rendert Phone mit 980px und verkleinert die ganze Seite — Text unlesbar, Buttons nicht klickbar.

AI-Tools inkludieren das meist per Default in Scaffolds, manche nicht. Ein 5-Sekunden-Check spart später Stunden Mobile-SEO-Debugging.

So nutzt du diesen Prompt in Claude Code

  1. 1. Dein Claude Code-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Claude Code-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outline`user-scalable=no` shippen — bricht Accessibility, Google flaggt.
  • error_outline`initial-scale=0.5` weil "es schöner aussieht rausgezoomt" — bricht alles.
  • error_outlineViewport-Tag ganz fehlt — 1 Minute zum Hinzufügen, viele Rankings zu verlieren.
  • error_outline`width=1024` statt `width=device-width` — fixe Breite erzwungen auf Mobile.

Wie du prüfst ob der Fix geklappt hat

  • check_circleQuelltext — Viewport-Meta-Tag mit korrektem Content existiert.
  • check_circleGoogle Mobile-Friendly Test (https://search.google.com/test/mobile-friendly) — besteht.
  • check_circleChrome DevTools → Device-Toolbar → iPhone — kein horizontales Scrollen, Text lesbar.
  • check_circleLighthouse → SEO — "Has a <meta name=viewport> tag" besteht.

Häufige Fragen

Kann ich Zoom deaktivieren?expand_more
Technisch ja, aber nicht. Zoom ist Accessibility-Feature und Google flaggt `user-scalable=no` als Issue.
Was ist initial-scale?expand_more
Das initiale Zoom-Level. 1 = 100% (normal). 1 nutzen; alles andere meist falsch.

Alle 34 Prompts passend zu deiner Claude Code-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Claude Code-Prompts

Performance

Core Web Vitals fixen (LCP, CLS, INP) — Claude Code

Prompt um Googles Core-Web-Vitals-Schwellen zu treffen: LCP < 2.5s, CLS < 0.1, INP < 200ms. Funktioniert in jedem AI-Stack.

Technik

lang-Attribut auf <html> setzen — Claude Code

Prompt um lang="en" oder lang="de" auf <html> zu setzen — für Accessibility und SEO.

Technik

UTF-8-Charset deklarieren — Claude Code

Prompt um <meta charset="utf-8"> am <head>-Anfang zu setzen — gegen kaputte Zeichen.

Technik

Gzip- oder Brotli-Kompression aktivieren — Claude Code

Prompt um Kompression am Hosting zu aktivieren damit HTML, CSS, JS 5-10x schneller übertragen.

Mehr im Glossar erfahrenarrow_forward