Glossary
Viewport meta tag
The viewport meta tag tells a mobile browser how to size the layout viewport for a page. Without it, phones assume the page was designed for a desktop, lay it out at roughly 980 pixels wide, and scale the result down — producing a legible-looking miniature that requires pinching to read. The tag every responsive site needs is one line, and the two values in it are the ones that matter.
What the values do
`width=device-width` sets the layout viewport to the device's own width in CSS pixels, so media queries see the real width and a responsive layout applies.
`initial-scale=1` sets the zoom level at load to one to one, which prevents the browser applying its own scaling on top.
Together they are the canonical tag: `<meta name="viewport" content="width=device-width, initial-scale=1">`. Almost nothing else is needed.
`viewport-fit=cover` extends the layout into the display cutout area on devices with a notch, and is used together with the safe-area inset environment variables.
Why user-scalable=no is a failure
`user-scalable=no` and a `maximum-scale` below 2 prevent a visitor zooming in.
WCAG success criterion 1.4.4 requires text to be resizable up to 200 percent without loss of content or function, and preventing zoom fails it directly.
The people affected are those with low vision, for whom pinch-zoom is the primary adaptation available on a phone.
Browsers now ignore the restriction in many cases — Safari and Chrome both override it under accessibility settings — which means it fails the criterion without even achieving what it was added for.
It is usually added to stop a layout breaking when zoomed, which is a layout problem to fix rather than a capability to remove.
What the tag does not do
It does not make a layout responsive. A page with fixed pixel widths and a viewport tag lays out at the device width and overflows it, which produces horizontal scrolling rather than a miniature.
It does not change images, which still need their own responsive handling.
It does not affect desktop browsers, which ignore it.
It is a prerequisite for a mobile layout rather than a mobile layout in itself, and a site missing it usually has more than one thing to fix.
How to check it
`curl -s https://example.com | grep -i 'name="viewport"'` shows the tag as served.
Look for `user-scalable=no` and for any `maximum-scale` below 2; both are findings.
Open the page in a mobile emulator and check whether content overflows horizontally, which is the failure mode the tag exposes rather than causes.
Check that the tag is present on every template, not only the home page. It is added once in a layout and missing from anything that does not use that layout.
Frequently asked questions
- What is the correct viewport meta tag?
- width=device-width, initial-scale=1. Anything beyond that is for specific cases such as display cutouts.
- Why should I not disable zooming?
- It fails WCAG 1.4.4, removes the primary adaptation available to low-vision users on a phone, and is ignored by current browsers anyway.
- Does the viewport tag make my site responsive?
- No. It makes media queries see the real device width. A layout with fixed pixel widths still overflows.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website