What does the meta viewport tag do?

It tells a mobile browser how wide to make the layout viewport and what zoom level to start at. Without it the browser assumes a desktop sized viewport of about 980 CSS pixels and scales the rendered page down to fit the screen, which is why an unconfigured page looks like a shrunken desktop site on a phone.

What is the correct viewport tag?

For almost every site it is width=device-width, initial-scale=1. That sets the layout viewport to the real screen width so CSS media queries fire correctly, and it opens the page at true size. Nothing else is needed unless you are drawing into a notch area, where viewport-fit=cover applies.

Why is user-scalable=no an accessibility failure?

WCAG 2.2 success criterion 1.4.4 Resize Text requires text to be enlargeable to 200 percent without loss of content or function. Disabling pinch to zoom removes the mechanism most people with low vision use on a phone, so the page fails at Level AA.

Does maximum-scale really need to be 5?

Anything below 2 fails WCAG 1.4.4 outright because text cannot reach 200 percent. Values between 2 and 5 pass that specific criterion but still block the deeper magnification people use for images and small labels, and automated audits including Lighthouse flag them. The simplest correct answer is to omit maximum-scale.

Do browsers still honour user-scalable=no?

Chrome on Android and recent versions of Safari on iOS override it and allow zoom anyway. Other browsers and in app webviews still obey it, and an accessibility audit will still record it as a failure, so leaving it in place is a liability rather than a working feature.

What happens if a page has two viewport tags?

Behaviour is not standardised. Some engines merge the directives, some apply the last tag, some keep the first. The practical result is that your page can lay out differently in Chrome and Safari on the same device, which makes mobile bugs very hard to reproduce.

Can I check a live URL, or do I have to paste HTML?

Either. Entering a URL sends it to our own API route, which fetches the page and reads its head, because a page running in your browser cannot fetch another site under the same origin policy. Pasting the source is still there for staging sites, password protected pages and templates that are not published yet, and that path never leaves your browser.

What does the URL check actually read?

The HTML the server returns, which is what a crawler reads too. It reports every meta viewport tag in document order with the exact content string, whether a charset is declared before the first one, the length of the head, and whether any viewport tag sits outside the head. A tag injected later by JavaScript is not in that response, which is itself worth knowing.

Does the viewport tag affect SEO?

Indirectly and significantly. Google indexes with a mobile crawler, and a page without width=device-width is rendered at desktop width and judged not mobile friendly. That feeds page experience signals and, more concretely, the layout shifts and unreadable text hurt real engagement.

Where should the viewport tag go?

In the head, ideally near the top before any stylesheet. The browser needs the layout viewport before it starts laying out content, so a tag added late by JavaScript causes a visible reflow and may be missed entirely by tools that read the raw HTML.

Is initial-scale=1 enough on its own?

Most current browsers will infer a device width viewport from initial-scale=1 alone, so the page usually renders correctly. It is still worth writing width=device-width because relying on inferred behaviour means a future browser change can alter your layout silently.

Free Meta Viewport Checker

Enter a URL, or paste a page source, and see whether the meta viewport tag is correct. The check reports the exact content string, flags a missing width=device-width, a wrong initial-scale, blocked zoom and duplicate tags, and explains what each one does on a phone.

Free, no signup URL or pasted HTML Checks WCAG 1.4.4 zoom

Check a live page

Enter a public http or https URL. The page is fetched on our side, so you get the markup the crawler sees rather than what a script builds afterwards.

Or check markup you have not published yet

Paste your page source

Staging, a local build or a template. Nothing leaves your browser on this path.

Tag fixed? The rest of the page matters too

A correct viewport tag is one line of a mobile site.

Grigora publishes sites that are responsive by default, with width=device-width set, zoom left enabled and breakpoints handled for you, so this check passes on every page without anyone remembering to add a meta tag.

Start free See the builder

How to check a meta viewport tag

Four steps from a URL or a paste to a clean result.

Enter the page URL

Any public http or https page. It is fetched on our side, so the same origin policy does not get in the way.

Or paste the markup

For a staging page or a template that is not live yet, use view-source, copy the head, and paste it instead.

Read the findings

Each one names the directive, what it does on a phone, and the exact edit that fixes it.

Fix and re-check

Apply the fixes, publish, then run the URL again to confirm every finding cleared.

How to check the meta viewport tag, step by step

Real screenshots of the tool, taken while checking a live page.

1
Enter a URL or paste the head
Both routes run the same checks, so a local template and a published page are graded identically.
2
Point it at the page to test
Check one template rather than every page. The viewport tag almost always lives in a single shared layout.
3
See the tag and the problems with it
It reports duplicate tags, tags sitting outside the head, and user-scalable=no, which stops readers zooming and fails an accessibility audit.

When people run this check

Six moments the viewport tag turns out to be the problem.

A page that fails mobile usability

Search Console reporting content wider than screen almost always starts at the viewport tag.

Accessibility audits

Blocked zoom is one of the fastest WCAG 1.4.4 failures to find and one of the fastest to fix.

After a theme or plugin update

Themes inject their own viewport tag, which is where duplicate tags come from.

Migrating an old site

Sites built before responsive design often carry a fixed width like 1024 in the tag.

Reviewing a developer handover

Check the tag before signing off, not after the client reports tiny text on their phone.

Landing pages built in a page builder

Builders sometimes add maximum-scale to keep their layout tidy, which caps zoom.

Where the tag lives on each platform

The file to edit, by platform.

WordPress

Open the theme header.php file.
Look for wp_head and for a hard coded viewport meta above it.
Keep one tag, and remove any second one injected by a plugin.

Next.js and React

Set the viewport once in _document.js or the app metadata export.
Remove any per page Head that also sets it.
View the rendered source to confirm only one tag ships.

Shopify

Open layout/theme.liquid.
The viewport tag sits in the head near the charset tag.
Edit it there rather than in a section or a snippet.

Grigora

Sites publish with width=device-width and initial-scale=1 by default.
Zoom is never disabled, so WCAG 1.4.4 is satisfied out of the box.
Run your published URL through the check above to confirm.

Grigora vs. other viewport checks

Side by side.

Capability	Grigora	Online SEO checkers	Site audit suites	Browser audits
Accepts a URL or pasted markup	Both	URL only	URL only	Live page only
Reports whether charset comes first	Yes	No	No	No
Flags maximum-scale under 5	Yes	Sometimes	No	Yes
Detects duplicate viewport tags	Yes	No	No	No
Explains the consequence of each finding	Yes	Pass or fail only	Pass or fail only	Short note
Works on staging or password protected pages	Yes, paste the source	No	No	No
Signup required	No	No	Yes	No

Common errors and how to fix them

Eight viewport problems that reach production.

No viewport tag at all

Cause: The head was written before mobile mattered, or the tag sits in a template that this page does not use.

Fix: Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head of every page.

width set to a fixed number

Cause: A desktop layout pinned to 1024 or 1200 pixels.

Fix: Replace the number with device-width and let your CSS breakpoints do the work.

user-scalable=no

Cause: Added to stop double tap zoom on a form or a map.

Fix: Remove it. Use touch-action in CSS on the specific element instead of disabling zoom for the whole page.

maximum-scale=1

Cause: Copied from an old iOS web app snippet.

Fix: Delete the directive. Anything under 5 flags in accessibility audits, and under 2 fails WCAG 1.4.4.

Two viewport tags

Cause: One in the base template, one added by a theme or a plugin.

Fix: Keep the template tag and remove the injected one. Search the whole output, not just your layout file.

initial-scale missing

Cause: The tag only sets width.

Fix: Add initial-scale=1 so the page opens at true size and does not rescale after a rotation.

Typo in a directive

Cause: initial_scale or maximum_scale with an underscore.

Fix: Directives use hyphens. A misspelled directive is silently ignored, so the setting simply never applies.

Tag added by JavaScript

Cause: The tag is injected after load by a script.

Fix: Put it in the server rendered HTML. A viewport applied late causes a visible reflow and can be missed by crawlers.

Viewport numbers worth knowing

The four values behind every finding above.

980

CSS pixels a mobile browser assumes when no viewport tag is present

200%

Text enlargement WCAG 1.4.4 requires, which user-scalable=no removes

Minimum maximum-scale value that passes automated accessibility audits

1024

Bytes a browser reads before guessing an encoding, which is why charset goes first

Frequently asked questions

Eleven answers about the meta viewport tag.

Related free tools

Other utilities that pair with the Meta Viewport Checker.

Build a site that is mobile ready by default

Website, email and store on one platform, responsive out of the box, starting free.

Start building free