The mobile viewport meta tag
Mobile browsers assume, by default, that a page was designed for a desktop screen. They lay it out on a wide virtual canvas (often around 980 pixels) and then shrink it to fit the phone. The result is tiny text that visitors have to pinch and zoom to read.
The viewport meta tag switches this off and tells the browser to use the real width of the device:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Why it matters
Without the tag, even a fully responsive design does not work on phones: CSS media queries see the wide virtual canvas, not the phone screen, so the mobile layout never applies.
Most web traffic is mobile, and Google uses the mobile version of a page for indexing and ranking (mobile-first indexing). A page that is hard to use on a phone loses visitors whether or not it loses rankings.
What we check
| Result | When |
|---|---|
| Pass | a <meta name="viewport"> tag contains width=device-width |
| Needs attention | the tag exists but does not set width=device-width (e.g. a fixed width) |
| Fail | there is no viewport meta tag |
The report shows the tag’s content value.
How to fix
Add this line inside <head>, before your stylesheets:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
…
</head>
width=device-widthsets the layout width to the device’s screen width in CSS pixels.initial-scale=1sets the starting zoom to 100%.
Then check that your layout actually works at narrow widths. The tag only lets your responsive CSS
take effect; it does not make a fixed-width design responsive. Look for elements with fixed pixel
widths, wide tables and images without max-width: 100%.
img,
video {
max-width: 100%;
height: auto;
}
If you use a CMS theme or framework template, the tag is usually in the base layout or the theme’s
header file. Check that a plugin or old template is not printing a second, conflicting tag.
Settings to avoid
Some sites add options that stop visitors from zooming:
<!-- avoid -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
Blocking zoom makes pages hard or impossible to read for people with low vision, and accessibility
audits flag it under WCAG success criterion 1.4.4 (Resize text). Some mobile browsers ignore these settings for that reason,
but do not rely on it. Remove user-scalable=no and any maximum-scale below 2.
Also avoid a fixed width such as width=1024. It brings back the zoomed-out desktop layout the tag
is meant to prevent.
MDN explains the tag and every supported value in its viewport meta tag reference.