Missing Viewport Meta Tag Example
On a road no wider than my ambition I took my two horses under my arms and refused to let anyone pinch them.
The short answer
- What it is
- This issue means the viewport tag is missing, uses a fixed numeric width, lacks device-width, or disables zoom. Disabling zoom means user-scalable=no or a maximum-scale of 1 or less.
- Why it matters
- Without a correct tag, phones show a shrunken desktop layout that is hard to read. Google indexes the mobile version of pages, so mobile usability affects how a site performs.
- How a crawler should report it
- Report the page URL, the viewport content value, and the fault: missing, fixed width, no device-width, or zoom disabled. Show the exact maximum-scale value when it triggers the warning.
- Live examples
/lab/mobile-issues/none/(positive)/lab/mobile-issues/fixed-width/(positive)/lab/mobile-issues/no-zoom/(positive)/lab/mobile-issues/no-device-width/(positive)/lab/mobile-issues/near-miss/(near miss)
What Phones Do With a Page That Gives No Layout Width
The viewport meta tag tells a mobile browser how wide to lay out the page. The standard value is <meta name="viewport" content="width=device-width, initial-scale=1">. It goes missing on old templates, on hand-built landing pages, and in HTML exported from email tools. A fixed width like width=1024 is a sign of a desktop design that was never made responsive. Zoom limits often come from a designer who wanted an app-like feel.
Without the tag, most mobile browsers lay the page out at a wide virtual width, often about 980 pixels. They then shrink it to fit the screen. Text becomes tiny, and tap targets get too small. Media queries also stop matching the true device width. Blocking zoom causes a separate harm, since people with low vision rely on it. Safari on iPhone has ignored user-scalable=no for years, but other browsers may still honor it.
Detecting this needs only the HTML. Find the tag in the head and split its content value by commas. Look for width=device-width. Flag user-scalable=no and any maximum-scale of 1 or less. A value such as maximum-scale=2 is allowed, since people can still zoom. Then load the page at a phone width in the developer tools to see how the layout behaves.
To fix it, add the standard tag to every template, inside the head and near the top. Remove any fixed width and any zoom limits. Then test the layout. A site that was built only for desktop may need real responsive CSS before the tag helps, because the page might now overflow the screen. Check that text stays readable, that nothing scrolls sideways, and that links have room to be tapped.