Missing viewport meta tag: what it does and what to set

What the viewport meta tag does

<meta name="viewport"> tells a mobile browser how wide to make the layout viewport. Without it, the browser assumes a desktop-width page, lays it out at around 980 pixels, and scales the result down to fit the screen, which is why an unstyled page looks like a shrunken desktop site.

width=device-width sets the layout viewport to the device’s own width, so CSS media queries measure what the user actually has. initial-scale=1 sets the starting zoom so the two agree. Those two together are the whole tag for almost every site.

What squirrel checks

The rule runs on every crawled page and looks for meta[name="viewport"]. It emits a single check named viewport, testing the content attribute by substring:

• Fail when the tag is absent. Message: Missing viewport meta tag, with the recommended tag as the value. Severity error, weight 8.
• Warn when content has no width= at all. Message: Viewport missing width property, with the content as the value.
• Warn when it has a width that is not width=device-width. Message: Viewport should use width=device-width.
• Info when it has width=device-width but no initial-scale=. Message: Viewport missing initial-scale.
• Pass otherwise. Message: Viewport meta tag is properly configured.

The checks are ordered, so only the first problem found is reported.

How to fix it

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

Put it in the head of every page, usually in the base layout. Do not add maximum-scale or user-scalable=no alongside it: those disable zoom, which mobile/viewport-zoom reports separately.

Enable / disable

Disable this rule

[rules]
disable = ["mobile/viewport"]

Disable all Mobile rules

[rules]
disable = ["mobile/*"]

Enable only this rule

[rules]
enable = ["mobile/viewport"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• mobile/viewport-zoom: the properties on the same tag that disable zoom.
• mobile/horizontal-scroll: layout that overflows even with a correct viewport.
• content/meta-in-body: a viewport tag that ended up outside the head.
• mobile/font-size: text sized for a desktop layout.

Mobile findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Viewport meta element, MDN
• Page experience, Google Search Central

Check your site

Run squirrel audit https://example.com and open the Mobile section of the report. Each page is reported with its viewport tag and what the content is missing. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.