Viewport Meta Tag
Without the viewport tag, your site renders at desktop width on phones - everything is tiny and users must pinch-zoom.
high severityWhat is this?
The viewport meta tag tells mobile browsers how to scale your page. Without it, mobile browsers render your page at a desktop viewport width (typically 980px) and then scale it down to fit the screen, making everything tiny.
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width tells the browser to match the screen width. initial-scale=1 sets the default zoom to 100%.
Why it matters
- Site is broken on mobile. Text is tiny, buttons are impossible to tap, users must pinch-zoom to read anything
- Google ranks mobile-friendly sites higher. Google uses mobile-first indexing - it primarily indexes and ranks the mobile version of your site
- High bounce rate on mobile. Users leave immediately if they can't read the page
Mobile devices account for over 60% of web traffic globally. A broken mobile experience means losing most of your users.
How to fix it
Add this single line inside your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the standard tag included by every framework's default template. If you're missing it, check that your base layout/template includes it.
Providers & tools
Most framework starters include this automatically. Check your base layout file:
| Framework | Where to check |
|---|---|
| Next.js App Router | Included automatically in <html> layout |
| Next.js Pages Router | Check pages/_document.js or _app.js |
| Astro | Your src/layouts/Layout.astro base layout |
| Plain HTML | Add to every <head> or your shared base template |
Check if your domain has this issue