Skip to main content

Free Meta Viewport Checker

See if a page is set up for phones.

User avatarUser avatarUser avatar
Trusted by 38,000+ SEOs and agencies

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. Tag fine but the page still breaks on phones? Our guide on how to make a website mobile friendly walks through the seven fixes in priority order.

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

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.

How to check a meta viewport tag

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

1

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.

2

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.

3

Read the findings

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

4

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 current tool, using sample inputs. Long results are shown as a preview.

  1. 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.

    Free Meta Viewport Checker in its default state before the walkthrough
  2. 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.

    Free Meta Viewport Checker with sample input or settings in place
  3. 3

    Review the result

    Select Check viewport to run the tool. This screenshot shows the result returned for the sample input.

    Free Meta Viewport Checker showing its actual result with sample inputs

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

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

Next.js and React

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

Shopify

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

Grigora

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

Grigora vs. other viewport checks

Side by side.

CapabilityGrigoraOnline SEO checkersSite audit suitesBrowser audits
Accepts a URL or pasted markupBothURL onlyURL onlyLive page only
Reports whether charset comes firstYesNoNoNo
Flags maximum-scale under 5YesSometimesNoYes
Detects duplicate viewport tagsYesNoNoNo
Explains the consequence of each findingYesPass or fail onlyPass or fail onlyShort note
Works on staging or password protected pagesYes, paste the sourceNoNoNo
Signup requiredNoNoYesNo

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
5
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.

It tells a mobile browser how wide to make the layout viewport and what zoom level to start at.
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.
WCAG 2.2 success criterion 1.4.4 Resize Text requires text to be enlargeable to 200 percent without loss of content or function.
Anything below 2 fails WCAG 1.4.4 outright because text cannot reach 200 percent.
Chrome on Android and recent versions of Safari on iOS override it and allow zoom anyway.
Behaviour is not standardised. Some engines merge the directives, some apply the last tag, some keep the first.
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.
The HTML the server returns, which is what a crawler reads too.
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.
In the head, ideally near the top before any stylesheet.
Most current browsers will infer a device width viewport from initial-scale=1 alone, so the page usually renders correctly.

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. Try it free for 14 days, no card needed.

Start building free