The Viewport Meta Tag Explained
What the viewport meta tag does, why width=device-width matters, and the common mistakes that break responsive layouts on mobile.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Why the tag exists
Without a viewport meta tag, mobile browsers assume your page was built for desktop and render it at around 980px wide, then shrink it to fit - giving users a tiny, zoomed-out page. The viewport meta tag tells the browser to use the device's actual width so your media queries and responsive layout work as intended.
Missing tag = browser fakes a ~980px desktop viewport
width=device-width maps CSS width to the device's real width
initial-scale=1 sets the starting zoom level to 100%
It is the single most important line for mobile rendering
The canonical tag and risky options
The standard tag is width=device-width, initial-scale=1. Avoid maximum-scale=1 or user-scalable=no, which disable pinch-zoom and create an accessibility barrier for users who need to magnify content. There is rarely a good reason to block zoom on a public site.
Use: width=device-width, initial-scale=1
Avoid user-scalable=no - it blocks accessibility zoom
Avoid maximum-scale=1 for the same reason
Add viewport-fit=cover only when handling device notches
Verify the tag is actually working
A typo or a missing tag produces a page that looks fine on desktop but renders zoomed-out on phones. The fastest check is to load the page on real mobile widths and confirm content fills the screen at 100% zoom. Sizzy renders accurate mobile viewports side by side, so you can confirm the tag is doing its job without grabbing a phone.
Load the page at 375px and confirm no desktop zoom-out
Check that pinch-zoom still works for accessibility
Verify viewport-fit=cover behavior near notches if used
Confirm the tag is present on every page, including errors
Release checklist
Every page includes width=device-width, initial-scale=1.
Pinch-zoom is not disabled.
viewport-fit=cover is only used with safe-area handling.
Mobile widths render at 100% with no zoom-out.
Frequently asked questions
What is the correct viewport meta tag?
The standard is <meta name="viewport" content="width=device-width, initial-scale=1">. This maps CSS pixels to the device width and sets initial zoom to 100%, which is what nearly every responsive site needs.
Should I use user-scalable=no?
No. Disabling zoom blocks users who need to magnify text and is an accessibility failure under WCAG. Leave pinch-zoom enabled on public sites unless you have an unusual, well-justified reason.
Why does my site look zoomed out on mobile?
That usually means the viewport meta tag is missing or malformed. Without it, mobile browsers render at a fake ~980px desktop width and shrink the page. Add width=device-width, initial-scale=1 to fix it.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.