Your site looks perfect on desktop. On a phone, it's a tiny unreadable mess.
You open your site on a phone and everything is zoomed out — the entire desktop layout squeezed into a 4-inch screen. Text is microscopic. Buttons are impossible to tap. Users pinch and zoom desperately.
The fix is one line of HTML:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Without this tag, mobile browsers assume your page is designed for a desktop-width screen (typically 980px) and scale it down to fit. Even if you've written perfect responsive CSS, it won't activate without the viewport tag.
Why this matters for SEO
Mobile-first indexing. Google uses the mobile version of your site as the primary version for indexing and ranking. If your mobile experience is broken, your rankings suffer — even for desktop searches.
Core Web Vitals. A page without a viewport tag will likely fail CLS (Cumulative Layout Shift) measurements because the browser has to reflow the layout.
User experience metrics. Tiny text and untappable buttons mean immediate bounces. High bounce rates signal to Google that users aren't finding what they need.
What the viewport tag does
The viewport tag tells the browser: "This page is designed for mobile. Use the device's actual screen width, don't assume it's a desktop."
The standard implementation:
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width— Sets the viewport width to the device's screen widthinitial-scale=1— Sets the initial zoom to 100%
That's it. One tag, placed in the <head> of every page.
Common viewport issues
| Issue | What happens |
|---|---|
| No viewport tag at all | Browser renders at desktop width, everything is tiny |
width set to a fixed pixel value | Page doesn't adapt to different screen sizes |
maximum-scale=1 or user-scalable=no | Prevents users from zooming — accessibility issue |
| Viewport tag present but CSS isn't responsive | Tag alone doesn't make a site mobile-friendly |
A note on accessibility
Avoid user-scalable=no and maximum-scale=1. These prevent users from zooming in, which is a problem for people with low vision. Many accessibility guidelines (WCAG) require that users can zoom to at least 200%.
How to check viewport tags across your site
Most modern sites have this right, but it's worth verifying — especially on older pages or pages from different templates. An audit should:
- Check every page for the presence of a viewport tag
- Flag pages with no viewport tag
- Detect problematic viewport configurations (fixed width, zoom disabled)
- Verify the tag is in the
<head>, not the<body>
Kaitico checks for the viewport meta tag on every crawled page, flagging missing or misconfigured tags so your mobile experience stays intact.