# Viewport / mobile
_Source: https://seomatrix.ai/tools/viewport-check/_
---
## What it does
The viewport meta tag tells mobile browsers how to size and scale a page — is the responsive-web standard. This checker inspects a URL's viewport tag, theme-color, and any zoom-blocking attributes, because Google indexes the mobile version of a site first: a missing or broken viewport makes the page render at desktop width on phones, hurting both rankings and readability.
## What it checks
- **Viewport meta tag** — The tag in the that controls how a page maps to the screen; without it, mobile browsers assume a ~980px desktop canvas and shrink everything down.
- **width=device-width** — The value that ties the layout width to the device's actual screen width — the foundation of responsive design and clean mobile-first rendering.
- **initial-scale=1** — Sets the opening zoom to a 1:1 ratio so the page loads at true size instead of arriving zoomed in or out.
- **Zoom-blocking (a11y)** — user-scalable=no or a low maximum-scale disables pinch-to-zoom, an accessibility failure under WCAG 1.4.4 that Lighthouse and Google both flag.
- **theme-color meta** — Sets the color of the mobile browser toolbar and address bar — a small but real mobile-UX and branding polish signal.
- **Mobile-first indexing** — Google predominantly crawls and ranks the mobile rendering of a page, so a broken viewport directly degrades the version that actually gets indexed.
## How to use it
1. Paste your page URL and run the check — the tool fetches the live HTML and reads the viewport, theme-color, and zoom attributes from the .
2. Review the flagged issues: a missing viewport tag, non-responsive width values, or zoom-blocking that fails accessibility.
3. Fix the viewport tag in your template (set width=device-width, initial-scale=1 and remove user-scalable=no), then re-run to confirm it passes.
## FAQ
### What is the viewport meta tag and do I need it?
The viewport meta tag tells mobile browsers to render a page at the device's real width instead of a default ~980px desktop canvas. Every responsive site needs — without it, phones show a shrunken, hard-to-read layout.
### Does a missing viewport tag hurt SEO?
Yes. Google uses mobile-first indexing, so it ranks the mobile rendering of your page; a missing or misconfigured viewport makes that mobile version look broken and unusable, which weakens rankings and mobile usability scores.
### Is disabling zoom with user-scalable=no bad?
Yes — blocking pinch-to-zoom is an accessibility failure under WCAG 1.4.4 and is flagged by Lighthouse. Users who need to enlarge text can't, so leave zoom enabled and avoid maximum-scale below 5.
### What does the theme-color meta tag do?
theme-color sets the color of the browser toolbar and address bar on supported mobile browsers, letting the chrome match your brand. It has no direct ranking effect but is a low-effort polish for mobile UX.