Add the viewport meta tag — Cursor

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 Cursor

Agentic AI code editor built on VSCode

In Cursor you edit real files, so this fix lands via direct diffs instead of a regenerated project. Paste the prompt below into your Cursor 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 Cursor

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

Apply these changes to my codebase. Edit the files directly and keep existing formatting:

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 Cursor

1. Open your Cursor project.
2. Copy the prompt above with the copy button.
3. Paste into the Cursor 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 Cursor 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 Cursor prompts

Performance