Viewport Meta Tag
A single line in the document head that tells a mobile browser how to scale the page to fit the screen.
Analogy Mental model
The automatic keystone correction on a projector. Without it, the phone takes a full desktop canvas and shrinks it until the text resembles ants.
In practice What you actually do
Use the standard form: width set to device width, initial scale of one. That gives you a page rendered at the phone's actual width so your stylesheet's responsive rules can do their job, rather than a zoomed-out desktop layout.
Where people get burned Pitfalls
Do not add a maximum scale of one or disable user scaling. Front-end teams do it to prevent accidental pinch-zooming, but it blocks the magnification that low-vision users depend on and accessibility audits penalise it.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →