Why does the tool warn so strongly about user-scalable=no?

Setting user-scalable=no (or a maximum-scale of 1) disables pinch-to-zoom on the whole page. People with low vision depend on zoom to read, so removing it is a direct accessibility barrier and fails WCAG 1.4.4 Resize Text (AA) and 1.4.10 Reflow (AA). It was once used to stop "accidental" zoom or to fake a native feel, but the downside far outweighs that. Modern Safari and Chrome now ignore the directive on the document viewport for exactly this reason — so leaving zoom enabled costs you nothing.

Is there ever a legitimate reason to disable zoom?

Rarely, and not on normal content pages. A full-screen map, drawing canvas, or game that implements its own gesture-based zoom can justify disabling the browser default so the two do not fight. Even then, prefer handling it with CSS touch-action on the specific element rather than killing zoom for the entire document. For everything else — articles, apps, forms, dashboards — keep pinch-zoom on.

What does maximum-scale do, and why flag it below 5?

maximum-scale caps how far users can zoom in. WCAG expects content to be magnifiable to at least 200%, and ideally much more, so a low cap limits people who need large text. A value of 1 effectively disables zoom (an error here); anything under 5 is flagged as a warning. The best practice is to omit maximum-scale entirely so zoom is unbounded — most sites never need to set it.

What is viewport-fit=cover and the safe-area CSS for?

On phones with a notch or rounded corners, viewport-fit=cover lets your layout extend edge-to-edge into those regions instead of leaving letterbox bars. The trade-off is that content can slide under the cutout or the home indicator. The env(safe-area-inset-top/right/bottom/left) CSS variables tell you exactly how much padding to add so your header, buttons, and text stay in the readable safe area. This tool generates that CSS snippet automatically whenever you select cover.

What are the companion head tags it can generate?

When you enable "Include companion mobile head tags," the output adds theme-color (which tints the browser UI and uses your picked color), apple-mobile-web-app-capable and mobile-web-app-capable (for installed/standalone PWA mode), apple-mobile-web-app-status-bar-style, and format-detection=telephone=no (to stop phones auto-linking numbers). These are optional extras around the core viewport tag, useful when you are setting up a progressive web app.

What does interactive-widget control?

interactive-widget is a newer viewport key that controls how the visual viewport reacts when the on-screen keyboard appears. resizes-visual (the browser default) shrinks only the visual viewport; resizes-content also resizes the layout viewport; overlays-content lets the keyboard float over the content. Only override the default if you have actually tested your keyboard interaction, since it changes layout behaviour on mobile form pages.

Viewport Meta Tag Generator

Build the <meta name="viewport"> tag — and get an instant accessibility audit. The headline check: this tool flags anything that blocks pinch-zoom (user-scalable=no, a low maximum-scale), because disabling zoom locks out low-vision users and fails WCAG 1.4.4 / 1.4.10. It also handles viewport-fit=cover for notched devices and hands you the env(safe-area-inset-*) CSS to go with it.

About this ToolHow it works, benefits & use cases

Most viewport generators just paste a string into your <head>. This one is built around the accessibility audit. The single most common viewport mistake is shipping user-scalable=no or a low maximum-scale to make a site "feel native" — and that locks out anyone who relies on pinch-zoom to read. So as you build the <meta name="viewport"> tag here, the tool runs a live audit and throws a prominent red banner the moment your settings block zoom, citing WCAG 1.4.4 Resize Text and 1.4.10 Reflow. Choose device-width or a fixed pixel width, tune initial-scale, optionally set minimum/maximum-scale, toggle pinch-to-zoom, and pick viewport-fit for notched phones and interactive-widget for on-screen-keyboard behaviour. A small device-frame preview reflects your choices and flags disabled zoom visually. When you opt into viewport-fit=cover, the tool also hands you the env(safe-area-inset-*) CSS so content stays clear of the notch, and it can emit companion mobile head tags (theme-color, apple/mobile web-app-capable, status-bar-style, format-detection). The whole configuration lives in a shareable URL.

How to Use

1Start from a preset — Recommended (accessible), Responsive web app, or PWA fullscreen (notch-safe) — or configure by hand.
2Choose device-width (recommended) or a fixed pixel width, and set initial-scale to 1 for a natural starting size.
3Leave "Allow pinch-to-zoom" enabled. If you disable it, the red accessibility banner explains why that fails WCAG.
4For notched phones, set viewport-fit=cover, then copy the env(safe-area-inset-*) CSS the tool generates alongside the tag.
5Optionally enable the companion mobile head tags and pick a theme color, then copy the tag or share the URL.

Key Benefits

Headline accessibility audit: flags user-scalable=no and low maximum-scale as WCAG 1.4.4 / 1.4.10 failures
A big red banner makes a disabled-zoom mistake impossible to miss
Device-frame preview that visually reflects width, scale, notch coverage, and zoom state
Generates the env(safe-area-inset-*) CSS whenever you use viewport-fit=cover
Optional companion head tags: theme-color, apple/mobile web-app-capable, status-bar-style, format-detection
Supports interactive-widget for controlling how the on-screen keyboard reflows the page
Emits only the non-default keys for a clean, minimal tag, and captures everything in a shareable URL

Common Use Cases

Shipping the correct accessible viewport tag for a new responsive site
Catching a copied-from-Stack-Overflow user-scalable=no before it reaches production
Setting up viewport-fit=cover plus safe-area padding for an installed PWA on a notched iPhone
Adding theme-color and web-app-capable head tags for a progressive web app
Reviewing whether an existing viewport configuration meets WCAG zoom expectations

Viewport meta tag

Paste inside <head>

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

Device preview

width device-widthinitial-scale 1 zoom on

Accessible — zoom is enabled

Presets

device-width, initial-scale=1, zoom left enabled. The right default for almost every site.

Options

Width

initial-scale

minimum-scale

Set

omitted

maximum-scale

Set

omitted

Allow pinch-to-zoom (user-scalable)

Zoom enabled — the accessible default.

viewport-fit (notched devices)

interactive-widget (on-screen keyboard)

Include companion mobile <head> tags

Adds theme-color, apple/mobile web-app-capable, status-bar-style, and format-detection.

Never disable zoom

user-scalable=no and a low maximum-scale were once a fashionable way to make a site “feel native.” They’re an accessibility failure: people with low vision rely on pinch-zoom to read, and removing it fails WCAG 1.4.4 Resize Text and 1.4.10 Reflow. Modern Safari and Chrome now ignore these on the document viewport precisely because they did so much harm — so you lose nothing by leaving zoom on, and you exclude no one.

viewport-fit and the notch

On phones with a notch or rounded corners, viewport-fit=cover lets your layout draw edge-to-edge. The catch: content can then slide under the cutout. Pair it with the env(safe-area-inset-*) padding this tool generates so headers, buttons, and text stay in the readable “safe area.”

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Viewport Meta Tag Generator

How to Use

Key Benefits

Common Use Cases

Device preview

Presets

Options

Never disable zoom

viewport-fit and the notch

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Viewport Meta Tag Generator