Warning Viewport meta tag — missing or incomplete

Why <meta name="viewport" content="width=device-width, initial-scale=1"> is required for responsive layouts on mobile.

The validator warns when the viewport meta tag is missing entirely (missing-viewport), or present but without width=device-width (weak-viewport).

Example

<meta name="viewport" content="width=device-width, initial-scale=1">

Why it matters

Mobile browsers render pages at a virtual "layout viewport" that defaults to roughly 980px wide — the width of a typical 2007-era desktop page — then scales the whole thing down to fit the screen, producing a tiny, zoomed-out page that requires pinch-zooming to read. Setting width=device-width tells the browser to use the device's actual screen width as the layout width instead, so your responsive CSS (media queries, flexible grids) applies the way you designed it. Without this tag, none of your responsive breakpoints will trigger correctly on a phone.

Frequently asked questions

Do I need initial-scale=1 as well as width=device-width?

width=device-width is the part that fixes the layout width. initial-scale=1 additionally sets the starting zoom level to 1:1, which most sites want — without it some browsers pick a different initial zoom that can still look off on first load.

Should I disable pinch-zoom with user-scalable=no?

Generally no — that's an accessibility problem for users who rely on zooming to read small text. It's rarely worth the tradeoff outside of specific app-like interfaces.