Start here
Before You Fix It: What This Check Means
Viewport meta controls responsive layout scaling behavior on mobile browsers. In plain terms, this checks whether mobile browsers are told to scale the page responsively. Scavo inspects the `meta[name="viewport"]` tag and validates key settings.
Why this matters in practice: operational drift here often causes hard-to-debug regressions across environments.
How to use this result: treat this as directional evidence, not final truth. This result reflects what was observable at scan time and should be verified in your own production context. First, confirm the issue in live output: verify directly in live production output with browser/network tools Then ship one controlled change: Use shared head partial with canonical viewport string. Finally, re-scan the same URL to confirm the result improves.
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 (plain English)
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.
Technical handoff message
Copy and share this with your developer.
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=1baseline. - Remove
user-scalable=nounless 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-widthand 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.
