Viewport checker
Check if the viewport is configured for proper site display on mobile devices
Check results
This check only covers the viewport. For a full picture of your page, run a page audit.
For issues across your whole site — duplicate titles, orphan pages, broken internal links — run a site audit.
Want us to fix what we found? Our team can help.
What is viewport and why it matters
The viewport meta tag — <meta name="viewport"> in <head> — tells mobile browsers how to size the visible area of a page. Without it, mobile browsers default to a desktop-width viewport (typically 980px) and scale the whole page to fit the small screen, producing microscopic text and forcing users to pinch-zoom. With width=device-width, the viewport matches the device's real width and responsive layouts work as intended. Since 2019 Google has used mobile-first indexing — the crawler evaluates the mobile version of the page first — so a missing or broken viewport directly hurts rankings.
What this tool checks
- Viewport tag presence — at least one
<meta name="viewport">in head - Tag count — exactly one viewport tag
- Non-empty content — the tag's content attribute must not be empty
- Parseable content — valid key=value pairs, not typos like
width-device-width - width=device-width — the page width should match the device
- initial-scale=1 — the page should load at 1:1 zoom
- Zoom enabled —
user-scalable=noandmaximum-scale=1fail accessibility
Why viewport matters for SEO and UX
- Mobile-first indexing — Google evaluates the mobile render of your page first; a broken mobile layout reduces the signals Google picks up
- Mobile Usability in Search Console — pages without proper viewport fail the "Text too small to read" and "Content wider than screen" checks
- User experience — a page that requires pinch-zoom on every screen loses engagement quickly; bounce rate rises, session length drops
- Core Web Vitals — poor mobile layout reduces visual stability (CLS) and interaction responsiveness (INP), both Google ranking signals
- Accessibility — disabling zoom blocks users with low vision from enlarging text to read
Good vs bad examples
Good — the standard modern responsive viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">Good — same, with viewport-fit=cover for iPhone notch / Dynamic Island support (only needed on fullscreen immersive apps):
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">Bad — viewport tag missing entirely (page renders as scaled-down desktop):
<!-- no viewport tag -->Bad — fixed pixel width (breaks on any device that isn't exactly 1024 wide):
<meta name="viewport" content="width=1024">Bad — zoom disabled (accessibility failure):
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Bad — typo, silently ignored by browsers:
<meta name="viewport" content="width-device-width, initial-scale=1">Common mistakes
- Omitting viewport entirely — most common on old sites; immediate fail in Google Mobile Usability
- Fixed pixel width —
width=320orwidth=1024forces one specific screen size; responsive design stops working - Typos in the content attribute —
width-device-width(dash instead of equals),devicewidth(no hyphen),width=device-widht— all silently ignored - Disabling zoom —
user-scalable=noormaximum-scale=1fails accessibility; iOS and modern Android now ignore these for this reason, but in-app webviews still honor them - Multiple viewport tags — usually a CMS or template bug; browser behavior is unpredictable
- initial-scale ≠ 1 — the page loads pre-zoomed, which confuses users
Frequently asked questions
<meta name="viewport" content="width=device-width, initial-scale=1">. It sets the viewport width equal to the device width and sets the initial scale to 1:1.width=device-width may make it unreadable on mobile. However, the best solution is to make the site responsive. Without responsiveness and without viewport, the site will lose positions in mobile search.srcset) and media queries to work correctly — which directly impact how much unused CSS/JS the browser downloads on mobile.user-scalable=no and maximum-scale=1 so users can always pinch-zoom — an accessibility win forced by the browser vendors. But in-app webviews (Facebook's in-app browser, older Android versions, custom apps) still honor these directives, so a segment of users loses zoom. Combined with the fact that disabling zoom signals "this site doesn't care about accessibility" to auditors and Lighthouse, it's worth removing regardless.viewport-fit=cover the page renders edge-to-edge behind the notch and Dynamic Island, and you use env(safe-area-inset-*) CSS to avoid placing content under them. For standard content sites, it's not needed — the default viewport-fit=auto leaves a small margin around the notch, which is fine.