Mobile & Responsive

Viewport Meta Tag Viewer & Rewriter

Fetch a page’s existing viewport meta tag or craft your own. Improve mobile rendering by adjusting device width, zoom, and scalability. Copy and drop into your HTML head.

Fetch viewport from URL (optional)

We’ll fetch the page and extract any tag.

Or paste HTML (optional)

Rewrite / Build Viewport Meta

Device width

Include width=device-width

Initial scale

Maximum scale (optional)

Minimum scale (optional)

User scalable (optional)

Processing…

Results

Original viewport (from URL/HTML)

No data

Rewritten viewport tag

What is the viewport meta tag?

The viewport meta tag tells mobile browsers how to size and scale a page. Common settings include width=device-width and initial-scale=1.0, which help content fit the device’s screen and start at a comfortable zoom level.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

FAQs

Do I need a viewport tag?
Yes, for mobile-friendly sites. Without it, pages may appear zoomed-out or scaled incorrectly on phones.

Is user-scalable=no recommended?
Use it cautiously. Preventing zoom can harm accessibility. Prefer letting users zoom unless there’s a specific UX reason.

What initial-scale values are common?
Most sites use 1.0. Larger values zoom in; smaller values zoom out, but can make content harder to read.

SEO-Friendly Tip

A well-configured viewport meta tag supports Core Web Vitals by improving mobile layout stability and readability. Pair it with responsive CSS and accessible font sizes to reduce layout shifts and enhance user satisfaction. If you’re migrating a desktop-only site, start with width=device-width, initial-scale=1, then test on real devices.