The viewport meta tag.
Why mobile pages look wrong.
Without a viewport meta tag, mobile browsers assume the page is a desktop page — about 980 pixels wide — and shrink it to fit the phone screen. Text becomes tiny, links become untappable, and users have to pinch-zoom to read anything. One line of HTML fixes it. This page explains why, what the line does, and the two attributes that matter.
Short answer: Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the <head>. width=device-width sets the page width to match the device's actual width. initial-scale=1.0 sets the starting zoom to 100%. Together they make the page render at real 1:1 size on mobile. Without them, the browser assumes 980px and zooms out.
✅ Before and after
The single line that fixes mobile.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>No Viewport</title> </head> <body> <h1>Hello</h1> <p>This text will be tiny on mobile.</p> </body> </html>
❌ Browser uses a 980px-wide layout viewport. ❌ Zooms out to fit the phone screen. ❌ Text is tiny — pinch-zoom to read. ❌ This is why 2010-era sites look broken on mobile.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>With Viewport</title> </head> <body> <h1>Hello</h1> <p>This text renders at real size.</p> </body> </html>
✅ Layout viewport = device width. ✅ Initial zoom = 100%. ✅ Text readable, links tappable. ✅ Responsive CSS media queries fire correctly.
width=device-width
Sets the layout viewport to the device's width in CSS pixels. Roughly 360–430px on phones, 768px on tablets.
initial-scale=1.0
Starting zoom = 100%. 1 CSS pixel ≈ 1 device pixel (adjusted by DPR). Prevents browser auto-zoom.
They're a pair
Use both. width=device-width without initial-scale can cause odd zoom. initial-scale without width leaves the layout at 980px.
viewport-fit=cover
Optional for notched phones. Extends the page into the safe area. Combine with env(safe-area-inset-*) in CSS.
✅ What each attribute does
The viewport content is a comma-separated list of properties.
<!-- Standard — use this --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- With notched-phone support --> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <!-- Disable user zoom — accessibility issue --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=device-width → layout width matches device initial-scale=1.0 → start at 100% zoom viewport-fit=cover → extend into the notch area maximum-scale=1.0 → cap zoom at 100% (blocks pinch-zoom) user-scalable=no → disable pinch-zoom entirely ⚠️ maximum-scale and user-scalable hurt accessibility. Avoid them unless you have a specific reason.
Don't disable pinch-zoom. user-scalable=no and maximum-scale=1.0 look like a clean way to "prevent layout bugs on mobile" — but they violate WCAG 1.4.4 (Resize Text), block users with low vision from zooming in, and are flagged by Lighthouse and most accessibility audits. The proper fix for "my mobile layout breaks on zoom" is a responsive layout, not a zoom lock.
⚠️ Common mistakes
The viewport mistakes that cost real time.
The page renders at 980px on mobile and shrinks. Fix: add the tag in <head>.
The browser renders before it sees the tag. Fix: put it in <head>, above any CSS.
user-scalable=noBlocks pinch-zoom. Fix: remove it. Users with low vision need to zoom.
maximum-scale=1.0Caps zoom at 100%. Fix: remove it, or raise it to 5.0.
width=980 or a fixed widthDefeats the purpose. Fix: width=device-width.
initial-scaleSome browsers apply their own zoom. Fix: always pair width=device-width with initial-scale=1.0.
Content hides behind the iPhone notch in landscape. Fix: viewport-fit=cover + env(safe-area-inset-*) in CSS.
The tag scales the page; it doesn't make the layout responsive. Fix: add media queries and fluid units on top.
❓ Frequently asked
What is the viewport meta tag?
The viewport meta tag tells mobile browsers how to scale the page to fit the screen. Without it, mobile browsers assume the page is 980px wide and zoom out to fit the whole thing, making text tiny. The standard line is: meta name="viewport" content="width=device-width, initial-scale=1.0". Width=device-width makes the page width match the device width. Initial-scale=1.0 sets the initial zoom to 100%. Together they make the page render at 1:1 on mobile.
What does width=device-width do?
It tells the browser to set the page's layout viewport to the device's actual width in CSS pixels. On a phone that's roughly 360–430px. Without it, the mobile browser uses a default layout viewport of about 980px and shrinks the whole page down to fit the screen. That's why pages without the viewport tag show as tiny zoomed-out text. Width=device-width makes the page think it's on a 400px-wide screen, not a 980px one.
Do I need the viewport meta tag?
Yes, if you want the site to be usable on mobile. Without it, the page is rendered as if on a desktop, then shrunk to fit the phone screen — text is unreadable, links are untappable, and pinch-zoom is the only way to interact. The single line meta name="viewport" content="width=device-width, initial-scale=1.0" fixes it. Add it to every page's head, above any CSS or script, so the browser knows the scale before it renders anything.
What does initial-scale=1.0 mean?
It sets the initial zoom level to 100% — 1 CSS pixel equals 1 device pixel (roughly, depending on the device pixel ratio). Without initial-scale, some browsers apply their own zoom when they detect a mismatch between layout width and screen width. Setting it to 1.0 makes the first render predictable. Combine it with width=device-width — they are a pair. One without the other often causes odd zoom behavior.
Should I use user-scalable=no?
No. user-scalable=no and maximum-scale=1.0 block pinch-zoom, which violates WCAG 1.4.4 (Resize Text). Users with low vision rely on pinch-zoom to read content. Lighthouse and most accessibility audits flag these attributes as failures. The proper fix for "my layout breaks when zoomed" is a responsive layout with fluid units — not a zoom lock. If you have a specific game or canvas app where zoom breaks the experience, consider it only after testing with accessibility tools.
What is viewport-fit=cover?
viewport-fit=cover extends the page into the safe area around notches and rounded corners on modern phones. Without it, the browser adds padding to keep content away from the notch. With it, content can go edge to edge, but you must handle the safe area yourself in CSS using env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left), and env(safe-area-inset-right). Use it for full-bleed designs and hero sections — not for text-heavy pages where content near the edges could be cut off.