What does the viewport meta tag do?

It tells the browser how to scale and size the page on mobile devices. Without it, most mobile browsers render the page at a 980px desktop width and then scale the whole thing down, making text tiny and layouts broken on small screens.

What is the recommended default viewport tag?

For most responsive websites the standard tag is: . This sets the viewport width to the device screen width and loads the page at a 1:1 scale with no initial zoom.

Should I set user-scalable=no?

Disabling user-scalable is generally discouraged for accessibility reasons — users who need to zoom in to read content will be unable to do so. Only use it for full-screen app experiences where zooming would break the UI. WCAG guidelines advise against blocking zoom for text content.

What does initial-scale=1.0 mean?

It sets the initial zoom level when the page first loads. A value of 1.0 means no zoom — one CSS pixel equals one device-independent pixel. Values less than 1 zoom out; values greater than 1 zoom in on load.

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

A fixed pixel width (e.g., width=480) is useful for pages designed for a specific device or screen size, such as kiosk displays or legacy mobile-only sites. For modern responsive design, always use device-width.

Do I need the viewport tag for desktop-only sites?

If your site is strictly desktop-only and will never be viewed on mobile, the tag is not strictly required. However, adding the standard tag does no harm and ensures the page behaves correctly if someone opens it on a tablet or phone.

Where do I add the viewport meta tag?

Place it inside the section of your HTML, ideally near the top before any stylesheets. In WordPress, most themes already include it; if not, add it to the header.php template inside the block. There should be only one viewport tag per page.

Viewport Meta Tag Builder

Name: Viewport Meta Tag Builder
Availability: InStock
Author: Nham Vu

Configure viewport options and instantly get the correct HTML meta viewport tag for your responsive website.

Configure Viewport

Width

device-width Fixed pixels

Initial Scale 1.0

0.1 (zoomed out) 5.0 (zoomed in)

Minimum Scale

Maximum Scale

User Scalable (pinch-to-zoom)

Omit (default) yes no

Generated Tag

Quick Presets

Attribute Reference

width: Sets the viewport width. Use device-width for responsive layouts, or a fixed pixel number.
initial-scale: Zoom level when the page first loads. 1.0 means no zoom.
minimum-scale: Smallest zoom level the user can pinch to. Defaults to 0.1 if omitted.
maximum-scale: Largest zoom level the user can pinch to. Defaults to 5.0 if omitted.
user-scalable: Whether the user can zoom. yes (default) or no. Avoid no for accessibility.

Copied!

Summary

Configure viewport options and instantly get the correct HTML meta viewport tag for your responsive website.

How it works

Select the width setting — "device-width" is recommended for responsive sites.
Set the initial-scale value (1.0 = no zoom on first load).
Optionally configure minimum and maximum scale limits.
Toggle the user-scalable option to allow or prevent pinch-zoom.
Copy the generated meta tag and paste it inside your HTML <head> section.

Use cases

Add correct viewport settings to a new HTML/CSS project.
Prevent mobile browsers from zooming out on page load.
Restrict or allow user pinch-to-zoom on mobile interfaces.
Generate tags for single-page apps, landing pages, or email templates.
Quickly look up the correct attribute names without memorizing the syntax.
Test different scale combinations to understand their effect on mobile layout.

Frequently Asked Questions

Last updated: 2026-06-10 · Reviewed by Nham Vu