Add the viewport meta tag — Claude Code

Without the viewport meta tag, phones render your page at 980px wide and zoom out — Google flags this as not mobile-friendly and demotes the page.

rocket_launch

Fixing this in Claude Code

Anthropic's official terminal coding agent

Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Claude Code

Copy and paste this into your Claude Code chat exactly as-is.

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>.

Why this matters

Since 2016 Google has flagged sites without a viewport meta tag as "not mobile-friendly" in Search Console. Since 2019 mobile-first indexing means Google primarily ranks based on the mobile version. No viewport = capped mobile ranking.

The tag tells the browser: render this page at the device width, do not zoom out. Without it, a phone renders at 980px and shrinks the whole page — text becomes unreadable, buttons become un-tappable.

AI tools usually include this by default in their scaffold templates, but some do not. A 5-second check saves hours of mobile-SEO debugging later.

How to use this prompt in Claude Code

1. Open your Claude Code project.
2. Copy the prompt above with the copy button.
3. Paste into the Claude Code chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineShipping `user-scalable=no` — breaks accessibility, Google flags it.
error_outlineUsing `initial-scale=0.5` because "it looks nicer zoomed out" — breaks everything.
error_outlineMissing the viewport tag entirely — 1 minute to add, many rankings to lose.
error_outlineSetting `width=1024` instead of `width=device-width` — forces a fixed width on mobile.

How to verify the fix worked

check_circleView source — the viewport meta tag exists with correct content.
check_circleGoogle Mobile-Friendly Test (https://search.google.com/test/mobile-friendly) — passes.
check_circleChrome DevTools → Device toolbar → iPhone — no horizontal scroll, text readable.
check_circleLighthouse → SEO — "Has a <meta name=viewport> tag" passes.

Frequently asked questions

Can I disable zoom?expand_more

Technically yes, but don't. Zoom is an accessibility feature and Google flags `user-scalable=no` as an issue.

What is initial-scale?expand_more

The initial zoom level. 1 means 100% (normal). Use 1; anything else is usually wrong.

Want all 34 prompts tailored to your Claude Code site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Claude Code prompts

Performance