Viewport meta tag generator for responsive web pages

Choose device-width for the standard mobile-friendly declaration, or enter a positive numeric width for a deliberate fixed viewport, then set the initial scale. The result includes a complete HTML tag ready to copy into a document head, its content value, and normalized settings that are convenient for scripts, templates, tests, and automated build pipelines across projects.

Choose the viewport width deliberately

A viewport declaration tells a mobile browser how the page's layout viewport should relate to the screen. For most responsive sites, device-width is the right setting because it follows the device's CSS-pixel width and lets media queries respond to the available space. This generator also accepts a positive numeric width when a controlled, fixed layout viewport is genuinely required, such as a legacy embedded interface, a reproducible browser fixture, or a compatibility test. Enter the number without a px suffix: 375 is valid, while 375px is not a viewport width value in this declaration. Zero, negative values, empty input, non-finite values, and arbitrary words are rejected instead of being placed into markup that looks plausible but does not express the requested setting. The returned width is normalized, so numeric text such as 375 becomes the stable content fragment width=375. This narrow validation makes the output useful in automation: success means the width is either the exact standard keyword or a positive number, with no hidden spelling correction or browser-dependent guesswork.

Set initial scale and copy the generated tag

The initial scale controls the zoom level when the page first loads. A value of 1 is the conventional choice: one CSS pixel maps to one viewport CSS pixel before the user zooms. The field defaults to 1, but another positive finite number can be supplied for a specific testing or application requirement. The generator validates that setting separately and preserves its numeric meaning in a stable textual form. It then produces a complete tag such as <meta name="viewport" content="width=device-width, initial-scale=1">. Place that tag inside the document's head, ideally once, rather than appending multiple viewport declarations whose interaction may differ between browsers. The response also exposes the content string and normalized width and initial_scale fields. Use meta_tag when writing HTML, content when a framework expects only the content attribute, and the individual fields when asserting configuration in tests. No network request, page inspection, or user-agent detection changes the result; identical input always returns identical output in the browser and through the API.

Understand what the generator does not add

This capability intentionally generates only width and initial-scale. It does not add maximum-scale, minimum-scale, user-scalable, viewport-fit, interactive-widget, or other optional directives, because those settings require product and accessibility decisions rather than automatic defaults. In particular, restricting user zoom can make content harder to use for people who need magnification, so a small tag generator should not silently introduce that behavior. The tool also does not audit an existing page, detect duplicate tags, test responsive breakpoints, or prove that the CSS itself is responsive. It creates deterministic markup from the two supplied settings. After adding the result, inspect the page at narrow and wide sizes, confirm that text remains readable, verify that controls do not overflow, and test zoom on real browsers. For templated projects, keep the generated declaration in the shared head component so each route receives the same policy. Interactive use on this page runs free in the browser; an automated API request costs $0.002. Because the same pure solver serves both paths, a tag tested manually can move into a build script without changing its formatting or validation rules.