Add the viewport meta tag — Lovable

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 Lovable

AI full-stack app builder (React + Vite + Supabase)

Lovable apps ship fast but skip most SEO and security basics out of the box. Paste the prompt below into your Lovable 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 Lovable

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

Fix my Lovable app — please make these exact changes in the Lovable editor:

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 Lovable

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

Performance