Viewport Meta Tag Missing — Mobile Rendering Broken

Start here

Before you fix it: what this check means

Scavo reads the viewport tag, which tells mobile browsers how to scale the page. It checks these settings without measuring the finished layout. Scavo inspects the `meta[name="viewport"]` tag and validates key settings.

Why this matters in practice: checking the reported setting helps you keep the site working as intended.

Use this as evidence, not a final verdict. This result covers what the scan could observe at that time, not every page or visitor situation. Check the live site first. Open the published page and ask your developer to inspect the reported request or setting Make one controlled change. Use shared head partial with canonical viewport string. Re-scan the same URL and compare the finding; check the feature yourself as well.

Background sources

TL;DR: The viewport meta tag is missing, causing mobile browsers to render your site at desktop width and make everything tiny.

Without a viewport meta tag, mobile browsers assume your page is designed for desktop and zoom out to fit the full width on a small screen. Everything becomes unreadably small. This is a single line of HTML (meta name="viewport" content="width=device-width, initial-scale=1") that every mobile-friendly site needs.

What Scavo checks (quick version)

Scavo inspects the meta[name="viewport"] tag and validates key settings.

How Scavo scores this check

Result behavior:

Fail: no viewport meta tag found
Info: Scavo could not gather enough reliable evidence on this run to score pass/fail confidently.
Warning: viewport exists but missing width setting
Warning: width is fixed (not device-width)
Warning: zoom is disabled (user-scalable=no / 0)
Pass: proper responsive viewport configuration

Scavo also records whether initial-scale is present.

In your scan report, this appears under What failed / What needs attention / What is working for viewport_meta, followed by Recommended next steps and Technical evidence (for developers) when needed.

Scan key: viewport_meta
Category: TECHNICAL

Why fixing this matters

Incorrect viewport setup breaks mobile layout assumptions, causes scaling issues, and can reduce readability/accessibility. It is a foundational mobile web requirement.

This is also a maintenance signal: if viewport tags vary by template, mobile behavior becomes inconsistent and hard to debug.

Common reasons this check flags

Viewport tag omitted in one layout/template.
Fixed-width viewport value copied from old code.
Accessibility-hostile zoom restrictions left in place.
Head partials diverged across page types.

If you are not technical

Ask whether one shared head template controls viewport config.
Confirm mobile pages scale to device width without horizontal zooming.
Ensure zoom remains available for accessibility.
Re-scan and confirm warning/fail clears.

Scavo flagged Mobile Viewport (viewport_meta). Please ensure meta viewport is present with width=device-width and no zoom-lock directives, and apply consistently across all public templates.

If you are technical

Use shared head partial with canonical viewport string.
Set width=device-width, initial-scale=1 baseline.
Remove user-scalable=no unless exceptionally justified.
Audit all layout variants for consistent viewport output.
Add template tests to catch missing viewport tags.

How to verify

View source and confirm viewport meta appears once.
Validate width=device-width and sensible scale settings.
Test rendering on real mobile devices/breakpoints.
Re-run Scavo and confirm pass.

What this scan cannot confirm

It does not evaluate all responsive CSS behavior by itself.
It does not detect every dynamic head-manipulation edge case.
It does not replace full cross-device QA.

Owner checklist

[ ] Assign owner for shared document head/meta policy.
[ ] Keep viewport config centralized in one layout include.
[ ] Ban zoom-lock directives in accessibility standards.
[ ] Revalidate after template-engine or CMS head changes.

FAQ

Is one viewport tag enough site-wide?

Yes in most cases, as long as it is correctly shared across templates.

Should we always include `initial-scale=1`?

It is a common stable baseline for responsive behavior.

Why is fixed width a warning?

It can force desktop-like rendering and poor adaptation to diverse device widths.

What should we fix first?

Missing tag first, then width/device-width correctness, then zoom accessibility.

Sources

Need a single canonical head-meta component for all templates? Send support your current layout include structure.

Viewport Meta Tag Missing — Mobile Rendering Broken