Add the viewport meta tag — Base44

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 Base44

No-code + AI app builder

Base44 generates reusable blocks — many fixes are applied by regenerating the affected block with clearer instructions. Paste the prompt below into your Base44 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 Base44

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

In Base44, regenerate the affected blocks with these exact instructions:

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 Base44

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

Performance