The viewport meta tag tells mobile browsers how wide to make the page’s layout area and how much to zoom it initially. Nearly every website should use exactly this line in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, phones assume the page is a desktop design, lay it out about 980 px wide, and shrink it to fit the screen. Your responsive CSS never gets the chance to run.
What happens without a viewport meta tag
When smartphones first appeared, most websites were built for desktop screens. To show them at all, mobile browsers pretended to have a desktop-sized “layout viewport” (980 px in iOS Safari and Chrome for Android) and zoomed out so the whole page fitted the screen. Users then pinched and zoomed to read.
That default still applies to any page without a viewport tag. On a phone with a 390 px wide screen, such a page:
- reports a viewport width of about 980 px to CSS and JavaScript
- never matches media queries like
(max-width: 600px) - renders text at roughly 40% of its intended size
If your site looks like a tiny desktop page on phones, check for this tag first. It is the most common cause in why a website looks different on mobile.
What each value means
| Value | Meaning | Recommended |
|---|---|---|
width=device-width |
Set the layout viewport to the device’s width in CSS pixels (for example 390 on many iPhones) | Yes |
initial-scale=1 |
Start at 100% zoom, with 1 CSS pixel mapped to 1 device-independent pixel | Yes |
minimum-scale |
Smallest zoom allowed | Rarely needed |
maximum-scale |
Largest zoom allowed | Avoid values below 5 |
user-scalable=no |
Disables pinch zoom | Avoid |
width=1024 (fixed number) |
Forces a fixed layout width | Avoid on responsive sites |
viewport-fit=cover |
Extends the page under notches and rounded corners | Only with safe-area padding |
interactive-widget |
Controls how the on-screen keyboard resizes the page | Optional |
Why you should not disable zoom
user-scalable=no and maximum-scale=1 stop people from zooming in. That makes the page harder or impossible to read for people with low vision, and conflicts with WCAG’s requirement that text can be resized up to 200%. Lighthouse flags it in its accessibility audit.
Developers often add it to stop iOS Safari from zooming into form fields. The proper fix for that is a font size of at least 16 px on inputs:
input, select, textarea { font-size: 1rem; }Modern iOS Safari ignores user-scalable=no for pinch zoom anyway, so the tag mostly harms other browsers.
viewport-fit=cover and safe areas
On phones with notches, dynamic islands or rounded corners, browsers by default keep the page inside a safe rectangle. viewport-fit=cover lets the page fill the whole screen, which you may want for full-bleed designs. You must then keep content clear of the notch and home indicator yourself:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">.site-header {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }Test this in landscape, where the notch sits on the side.
interactive-widget and the on-screen keyboard
When the keyboard opens, browsers either shrink the visual viewport only (the default in Chrome and Safari) or resize the whole layout. The newer interactive-widget value lets you choose:
resizes-visual: default; the layout stays the same size and the keyboard covers part of itresizes-content: the layout viewport shrinks, so100dvhelements and fixed footers move above the keyboardoverlays-content: nothing resizes; use the VirtualKeyboard API to handle it yourself
Support differs between browsers (Chromium-based browsers support it; check current support before relying on it), so test forms on real phones either way.
Outdated values you can remove
shrink-to-fit=nowas a workaround for iOS 9 and has no effect now.target-densitydpiwas an old Android value and is ignored.<meta name="HandheldFriendly">and<meta name="MobileOptimized">date from feature phones.
How to check your viewport tag
- View the page source and search for
name="viewport". There should be exactly one. - Run a Lighthouse audit in mobile mode (how to); it reports missing or zoom-blocking viewport tags.
- Open the page in a mobile view. In DevTools device mode, or a mobile view extension that loads the page at a real phone size, a page without the tag looks zoomed out with tiny text.
Frequently asked questions
What is the correct viewport meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1">. Add viewport-fit=cover only if you design for full-screen layouts and handle safe areas.
Do I need the viewport meta tag for responsive design?
Yes. Without it, mobile browsers lay pages out at about 980 px wide, so mobile media queries never apply.
Is it bad to use user-scalable=no?
Yes, for accessibility. It prevents users from zooming text. Fix unwanted zoom on form fields with a 16 px input font size instead.