Viewport Meta Tag Generator

Configure the HTML <meta name="viewport"> tag for mobile browsers. Control zoom, scaling, and notch safe-area behavior.

⚙️ Configuration

width

Match the browser viewport to the device's logical width.

initial-scale: 1.0

1.0

Zoom level when the page first loads. 1.0 = no zoom.

Set minimum-scale

Set maximum-scale

Set user-scalable

Set viewport-fit (iOS notch)

Set interactive-widget (Chrome)

📋 Output

📱 Device Preview

Previews below render a tiny test page inside device-sized frames using your current viewport settings. The inner page uses the same <meta> tag you're building.

iPhone SE
375×667

iPhone 14
390×844

Galaxy S22
360×780

iPad Mini
768×1024

💡 Attribute Reference

Attribute	Purpose
`width`	Sets the viewport width. `device-width` matches the device's logical width.
`initial-scale`	Zoom ratio at first render. Always pair `device-width` with `initial-scale=1`.
`minimum-scale` / `maximum-scale`	Zoom bounds. Setting a max hurts accessibility — prefer not to restrict.
`user-scalable`	Whether users can pinch-zoom. Setting `no` is an accessibility issue.
`viewport-fit`	iOS only. `cover` enables rendering behind the notch — pair with `env(safe-area-inset-*)`.
`interactive-widget`	Controls how mobile keyboards affect the viewport. New in Chrome 108+.