Missing viewport meta tag: why mobile users see a desktop-sized page
A missing viewport meta tag makes mobile browsers render your page at desktop width, then zoom out — which fails Google's mobile usability check and tanks Core Web Vitals. The fix is one HTML line.
A missing viewport meta tag makes mobile browsers render your page at desktop width, then zoom out — which fails Google's mobile usability check and tanks Core Web Vitals. The fix is one HTML line. The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — tells mobile browsers to use the device's actual width for layout. Without it, they assume 980px (desktop) and scale the page to fit.
Last updated·
What it is
The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — tells mobile browsers to use the device's actual width for layout. Without it, they assume 980px (desktop) and scale the page to fit.
Why it matters
Google uses mobile-first indexing — a page that fails mobile usability is downgraded across the board. CLS (Cumulative Layout Shift) and LCP (Largest Contentful Paint) get measured against the broken layout. And users bounce.
How to fix it
- Add the meta tag. Inside <head>: <meta name="viewport" content="width=device-width, initial-scale=1">. That is the entire fix.
- Do not disable zooming. Older "user-scalable=no" hacks violate accessibility and Google flags them. Let users zoom.
- Test on a real device. Chrome DevTools mobile emulation is close but not perfect. Confirm on an actual phone, especially for font scaling.
Authoritative sources
- Google Search Central documentation — Google
- Schema.org vocabulary — schema.org
- SEO Starter Guide — Google Search Central
- MDN — HTML meta and link elements — Mozilla MDN