Meta Viewport Tag Generator
Note: Put this in the <head> immediately after the charset declaration. The browser begins laying out before the head has finished parsing, so a viewport tag placed after a stylesheet can arrive too late and cause a visible reflow.
The two settings worth refusing are user-scalable=no and maximum-scale=1. They exist to stop pinch-to-zoom, usually to make a site feel more like an app, and their cost falls entirely on people with limited vision who rely on zooming to read. It is an explicit accessibility failure under WCAG 1.4.4, and both iOS Safari and Android Chrome now ignore them in most contexts anyway — so the modern effect is to fail an audit without even achieving the thing you wanted.
viewport-fit=cover is the setting that has aged well. On a phone with a notch or rounded corners, the default keeps your content inside a safe rectangle, leaving visible bands at the top and bottom. cover extends the layout edge to edge, and you then pad your content back in using the env(safe-area-inset-*) variables so nothing important sits under the camera housing. The generator includes those CSS lines, because using cover without them is how text ends up behind the notch.
interactive-widget controls what happens when the on-screen keyboard appears — worth setting deliberately if your layout has anything fixed to the bottom.
Frequently Asked Questions
Should I ever use user-scalable=no?
No. It removes pinch-to-zoom, which people with low vision depend on, and it fails WCAG 1.4.4. Both major mobile browsers now ignore it in most situations, so it no longer even does what it was added for — it just leaves an accessibility failure in your markup.
What does viewport-fit=cover actually do?
It lets your layout extend into the area around a notch or rounded corners rather than being kept inside a safe rectangle. It is only half the job — you then need padding built from the env(safe-area-inset-*) variables, or your content ends up underneath the camera housing.
Do I need initial-scale=1 if I have width=device-width?
Yes, and specifically for older iOS, where width alone did not prevent a layout being rescaled after an orientation change. It costs nothing and removes a class of bug that is deeply confusing to debug.
Where does the tag go?
In the head, and as early as possible — ideally right after the charset declaration. The browser starts laying out before the head finishes parsing, so a viewport tag placed after a stylesheet or a script can arrive too late and cause a visible reflow.
