SEO Tools
Viewport Meta Tag Generator
Generate the viewport meta tag for responsive design. Pick a preset, fine-tune width, scale, and viewport-fit, and copy the HTML in your browser.
Presets
Pick a starting point and tweak the controls below.
width=device-width with initial-scale=1. The right default for almost every modern site.
Width
How the layout viewport sizes itself. Almost always device-width.
Height (rare)
Most browsers ignore this. Leave off unless you have a specific reason.
Scale
Initial zoom on first paint, and the zoom range users can pinch into.
Notices
- This is the canonical responsive viewport. It matches the default Google Mobile-Friendly recommendation.
content attribute
width=device-width, initial-scale=1
HTML meta tag
Drop this inside the <head> of every page, ideally before any stylesheet that uses viewport units.
<meta name="viewport" content="width=device-width, initial-scale=1" />Supported properties
Quick reference for every descriptor that can appear in the viewport tag.
width
Sets the layout viewport width. device-width matches the device's screen width in CSS pixels. A fixed number locks the layout to that width.
height
Sets the layout viewport height. Rarely used; most browsers ignore it. Use device-height for completeness with width=device-width.
initial-scale
Zoom level applied on first paint, between 0.1 and 10. The recommended value is 1. Lower values shrink the page; higher values zoom in.
minimum-scale
Floor of the zoom range. Default is 0.1. Increasing it prevents the user from zooming out beyond a certain point.
maximum-scale
Ceiling of the zoom range. Default is 10. Capping it (especially at 1) prevents pinch-zoom and is an accessibility regression.
user-scalable
yes (default) lets the user zoom. no disables zoom entirely. iOS Safari ignores this in most cases, but Android Chrome and Firefox respect it.
viewport-fit
auto (default) avoids display cutouts. contain stays inside them. cover lets the page render under notches and home indicators; pair with env(safe-area-inset-*).
interactive-widget
Chromium-only. Controls whether the on-screen keyboard resizes the visual viewport, the layout viewport, or overlays both. Safe to include on other browsers.
How to use
- Pick a preset from the row at the top: Responsive is the right default for almost every modern site.
- Adjust width, scale, user-scalable, viewport-fit, and interactive-widget. Toggle each descriptor on or off so the output only includes what you need.
- Read the notices panel: errors block the output, warnings flag accessibility issues like disabled zoom, and info messages explain less common descriptors.
- Copy the resolved content string for use in a framework that builds the meta tag programmatically, or copy the full HTML tag for direct paste into the <head>.
- Use the property reference at the bottom for quick lookups on what each descriptor does.
About this tool
Viewport Meta Tag Generator builds the <meta name=viewport> tag that controls how a page lays out on phones, tablets, and split-screen browsers. Pick a preset (Responsive, Responsive with safe-area for notched iPhones, Responsive with explicit zoom allowance, Kiosk with zoom disabled, or Fixed pixel width for legacy desktop pages) and tweak the descriptors below: width (device-width or a fixed pixel value), an optional height, initial-scale on first paint, the minimum-scale and maximum-scale zoom range, user-scalable, viewport-fit for iOS notches and the home indicator, and interactive-widget for how Chromium handles the on-screen keyboard. The tool validates every value (scales between 0.1 and 10, widths between 200 and 10000) and surfaces a notices panel for the mistakes that hurt real sites the most: pinch-zoom disabled (an accessibility regression that affects every low-vision user), fixed widths that break on small screens, minimum-scale higher than maximum-scale, off-the-rails initial-scale values, and viewport-fit=cover without a reminder to use the env(safe-area-inset-*) CSS variables. The output panel shows the resolved content string and the full HTML tag side by side with copy buttons. Everything runs in your browser, so the configuration never leaves your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Canonical Tag Generator
Build a normalized rel=canonical link tag and HTTP header from any URL.
Open tool
SEORobots Meta Tag Generator
Per-page robots meta tag and X-Robots-Tag header builder with per-bot directives.
Open tool
SEOOpen Graph Tag Generator
Build og: and twitter: meta tags with live multi-platform previews and validation.
Open tool
SEOMeta Tag Preview
SERP, Open Graph, and Twitter Card preview with pixel-accurate length checks.
Open tool
SEOHreflang Tag Generator
Build reciprocal hreflang annotations as HTML tags, HTTP headers, or sitemap entries.
Open tool
DeveloperViewport Size Tester
Live viewport, screen, DPR, breakpoint, and media query readout.
Open tool