Viewport Meta Tag Generator

The Viewport Meta Tag Generator lets you configure and preview every parameter of the HTML viewport meta tag, including width, initial scale, minimum/maximum scale, and user-scalable settings. It outputs ready-to-paste head tags, a phone simulation of how your settings render, and an HTML5 boilerplate download with the tags in place. Built for front-end developers, web designers, and anyone building responsive sites who needs precise control over how browsers render their pages on mobile devices.

Configuration

Core settings

Viewport width

Initial scale

Scale limits

Add zoom limits (minimum-scale, maximum-scale)

Minimum scale

0.5

Maximum scale

Allow pinch-to-zoom (user-scalable)

Advanced options

Viewport fit (notch and safe area)

Include charset meta tagInclude IE X-UA-Compatible tag (legacy)

Extras

Page title (<title> tag, empty to leave out)

Notes (added as an HTML comment, optional)

How to Use

1. Configure the viewport width (device-width or a fixed pixel value) and set your initial scale factor in the Core Settings group. 2. Adjust the minimum and maximum scale limits and toggle whether users can pinch-to-zoom on your page. 3. Watch the phone simulation, accessibility checks and parameter table update as you change options. 4. Copy the head tags into your project, or download them wrapped in a complete HTML5 boilerplate.

Why Use This Tool?

Hand-typing viewport meta tags is error-prone, a single typo in a comma-separated attribute value silently breaks mobile rendering on millions of devices. This tool eliminates that risk by generating syntactically correct tags instantly, with no dependencies, no login, and no frameworks to install. It also surfaces less-known parameters like viewport-fit=cover (required for iPhone notch support) that most developers forget to consider.

Frequently Asked Questions

What is the Viewport Meta Tag Generator?

It is a free browser-based tool that builds the HTML viewport meta tag from a form UI, so you get a correctly formatted, copy-paste-ready snippet without memorizing attribute syntax or risking typos.

When should I use a fixed pixel width instead of device-width?

Use device-width (the default) for virtually all responsive sites, it tells the browser to match the viewport to the physical screen width. A fixed pixel value (e.g. 320 or 1024) is only appropriate when you are locking a legacy fixed-layout page to a specific width, or when embedding your page inside a controlled iframe environment. Using a fixed value on a modern responsive site will break fluid grids and media queries on most devices.

Is it free?

Yes, the Viewport Meta Tag Generator is completely free with no signup required. Built by the Canvas Builder team.

Stop tweaking snippets. Build the whole site

This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.

Start building free Build a site from this