Should I disable user-scalable to stop "accidental" zooming?

Generally no — blocking pinch-to-zoom prevents low-vision visitors from zooming in to read your content, which is flagged by accessibility guidelines (WCAG 1.4.4). Fix layout issues instead of disabling zoom.

What does viewport-fit=cover actually do?

On devices with a notch or rounded corners, it lets your page's background extend into those safe-area insets instead of leaving a black bar, while you use the env(safe-area-inset-*) CSS functions to keep content itself clear of the notch.

Is width=device-width always correct?

For the vast majority of responsive sites, yes — it makes the CSS viewport match the device's natural width so your responsive breakpoints behave predictably.

Category: Developer tools

Viewport Meta Generator

System ideaMissing a tool?

Generate a responsive viewport meta tag and understand its options

Set the width, initial scale, zoom limits, pinch-zoom permission and viewport-fit for your page's viewport meta tag, with a short explanation of each option, and copy the finished tag into your <head>. Built locally in your browser.

WidthUsually "device-width" so the layout matches the screen's CSS pixel width.Initial scaleThe zoom level on first load; 1 means no zoom.Minimum scaleMaximum scaleLeave blank to let visitors zoom freely between any bounds.Viewport fit"cover" lets content extend into notch/safe-area insets on supporting devices.

Allow pinch zoom (user-scalable)

Turning this off blocks pinch-to-zoom, which hurts accessibility — most sites should leave it on.

Meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

The viewport meta tag tells a mobile browser how to size and scale a page — without it, phones render pages at a fixed desktop-like width and zoom out, which is why it's one of the first things a mobile-friendliness checker looks for. Getting width=device-width and initial-scale=1 in place covers the common case, but the scale limits and viewport-fit options are worth understanding rather than copy-pasting blindly, since disabling zoom entirely is an accessibility problem for low-vision users.

How to use it

Leave width as "device-width" unless you have a specific reason to change it.
Set an initial scale, and optionally minimum/maximum zoom limits.
Decide whether to allow pinch-to-zoom — leaving it on is recommended.
Choose a viewport-fit value if your design needs to reach into notch or safe-area insets.
Copy the generated tag into your page's <head>.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Should I disable user-scalable to stop "accidental" zooming?: Generally no — blocking pinch-to-zoom prevents low-vision visitors from zooming in to read your content, which is flagged by accessibility guidelines (WCAG 1.4.4). Fix layout issues instead of disabling zoom.
What does viewport-fit=cover actually do?: On devices with a notch or rounded corners, it lets your page's background extend into those safe-area insets instead of leaving a black bar, while you use the env(safe-area-inset-*) CSS functions to keep content itself clear of the notch.
Is width=device-width always correct?: For the vast majority of responsive sites, yes — it makes the CSS viewport match the device's natural width so your responsive breakpoints behave predictably.