Viewport Meta Generator

How to use it

1. Set width — device-width for responsive layouts, or a pixel value when the layout is fixed.
2. Set initial-scale; 1 is the usual choice, higher values zoom in on first paint.
3. Tick minimum-scale or maximum-scale to include those limits, and set the values next to them.
4. Pick user-scalable and viewport-fit, or leave them on auto to keep them out of the tag entirely.
5. Press a Preset to fill the whole form, then Copy the generated tag.

The four presets cover mobile first, zoom locked, tablet friendly and notch safe. Each one just writes values into the form and runs the same generator, so you can tweak any preset afterwards.

Common use cases

• Starting a responsive page — the mobile first preset produces the tag most layouts need and nothing more.
• Handling notched devices — viewport-fit=cover plus safe-area padding in CSS keeps content clear of the notch.
• Diagnosing zoom complaints — if users cannot pinch to zoom, look for user-scalable=no or maximum-scale=1 in the tag.
• Comparing configurations — flip between presets to see exactly which tokens change in the content string.

Why it stays private

The tag is assembled from the values in the form. Nothing is uploaded, and no page of yours is fetched or analysed.

FAQ

Q: Is blocking zoom ever a good idea? A: Rarely. WCAG 1.4.4 expects text to scale to 200%, and pinching is how many people read small text. Keep user-scalable out of the tag unless a specific widget, such as a map, genuinely needs it.

Q: Do I still need the tag if my CSS is responsive? A: Yes. Without it mobile browsers assume a desktop width around 980 px and scale the page down, so your media queries never match the real device width.

Q: What does viewport-fit=cover do? A: It lets the page draw under rounded corners and the notch area. You then need env(safe-area-inset-*) padding in CSS so interactive content stays reachable.