Skip to content
SEO Madmanby Adam Hafez
Free tool

Meta viewport tag validator for mobile and zoom

Meta viewport tag validator: checks the content string for unknown keys, width=device-width and zoom blocking under WCAG 1.4.4. Free, runs in your browser.

Runs entirely in your browser. Nothing you enter is uploaded, logged or stored.

Parsed entirely in your browser against the recognized property list in the W3C CSS Viewport Module spec. Nothing you type is sent anywhere.

Key takeaways

  • The W3C CSS Viewport Module lists seven recognized viewport meta properties, and this tool also accepts viewport-fit from the CSS Round Display spec.
  • Google says the viewport tag tells the browser how to render a page on a mobile device, and that its presence indicates the page is mobile friendly.
  • WCAG 1.4.4 requires that text can be resized up to 200 percent without loss of content or functionality, at level AA.
  • The W3C rule "Meta viewport allows for zoom" fails user-scalable=no and any maximum-scale below 2.
  • This tool parses only the content string typed in; it cannot see whether the live page's layout actually responds to the width it declares.

What it takes

  • The content attribute of a meta viewport tag

More tools

All of them free, all of them browser-only.

Browse the tools

How to use it

  1. 1Paste the content attributeCopy only the value inside content="...", such as "width=device-width, initial-scale=1", not the surrounding meta tag.
  2. 2Check for unrecognized keysA key outside the recognized list is not invalid HTML, but the spec's parser has nothing to do with it, so it has no effect.
  3. 3Confirm width=device-width and initial-scale=1These are the usual responsive pair. A fixed pixel width instead of device-width forces the same layout width on every screen.
  4. 4Read the zoom-accessibility checkA red flag here means user-scalable=no or a maximum-scale below 2 is present, which the W3C zoom test rule fails under WCAG 1.4.4.
  5. 5Remove a zoom-disabling value rather than justify itRemoving user-scalable=no and any maximum-scale below 2 clears the flag without changing the layout width the tag declares.

Paste the value of a viewport meta tag’s content attribute and the validator returns a pass, warning, information or problem line for each check. It parses the string in your browser and sends nothing anywhere.

What this viewport validator checks

  • Recognized keys. The W3C CSS Viewport Module Level 1 lists seven properties for the viewport meta element: width, height, initial-scale, minimum-scale, maximum-scale, user-scalable and interactive-widget. The tool also accepts viewport-fit, defined in the W3C CSS Round Display spec with the values auto, contain and cover. Any other key is named as unrecognized.
  • width=device-width. Google’s special tags page says the viewport tag tells the browser how to render a page on a mobile device. A fixed pixel width forces one layout width on every screen, so anything other than device-width is a warning.
  • initial-scale=1. The usual pair for device-width. A different or missing value is information, not an error.
  • Zoom. WCAG success criterion 1.4.4, level AA, requires text that can be resized up to 200 percent. The W3C rule “Meta viewport allows for zoom” fails a tag with user-scalable=no or a maximum-scale below 2. The tool flags both, and also treats user-scalable=0 as disabled.
  • height. Recognized by the spec but unusual beside a responsive width, so it is shown as information to double-check.
  • Separators. The spec’s parser accepts commas and semicolons, and says authors should use commas. The tool splits on both.

How to read the results

  • Problem (red): zoom is disabled, or the content string is empty. Fix these; an empty attribute does the same as no viewport tag.
  • Warning (amber): an unrecognized key, or width is missing or set to something other than device-width.
  • Information (grey): initial-scale is not exactly 1, or height is set. The initial-scale check compares the text exactly, so initial-scale=1.0 also shows as information even though it is the same number.
  • Pass (green): the check matches.

Worked example

The tool loads with a common but flawed tag:

width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no

All keys pass as recognized, width=device-width passes and initial-scale=1 passes. The zoom line is a problem: “Disabled (user-scalable=no)”, because the W3C test rule fails that setting. Remove the last two values:

width=device-width, initial-scale=1

Every line now passes and the zoom line reads “Enabled”.

Common mistakes it catches

  • Zoom switched off. user-scalable=no and maximum-scale=1 were once used to stop double-tap zoom on mobile. Both fail the W3C zoom rule, and a low-vision visitor cannot work around them.
  • Fixed widths. width=1024 renders a desktop-width layout on a phone. It is flagged in favor of device-width.
  • Dead keys. target-densitydpi and misspellings such as intial-scale are named, since the browser ignores them.
  • Whole tag pasted. Pasting <meta name="viewport" ...> instead of the content value makes the first key unrecognized and width missing. Paste only what sits inside the quotes.

One edge case: the W3C rule passes maximum-scale=-1, because a negative value is dropped. This tool flags any number below 2, including -1, so treat that one result as a false alarm and remove the value.

Sources

  1. 1.CSS Viewport Module Level 1 - W3CPrimary
  2. 2.Meta tags and attributes that Google supports - Google Search Central
  3. 3.Understanding Success Criterion 1.4.4: Resize Text - W3C Web Accessibility Initiative
  4. 4.Meta viewport allows for zoom - W3C Web Accessibility InitiativePrimary
  5. 5.CSS Round Display Level 1 - W3C

Frequently asked questions

What is the correct meta viewport tag?

The usual responsive tag is content="width=device-width, initial-scale=1". It passes every check here. Leave out user-scalable=no and any maximum-scale below 2 so visitors can still zoom.

Does a missing viewport tag hurt rankings directly?

Google's special tags page says the tag tells the browser how to render a page on a mobile device and that its presence indicates the page is mobile friendly. It does not describe a separate ranking penalty for leaving it out.

Why flag maximum-scale under 2 specifically?

WCAG 1.4.4 asks that text can be resized up to 200 percent. The W3C test rule for viewport zoom fails a maximum-scale below 2 and passes 2.0, so 2 is the line this tool uses.

What does an unrecognized property actually do?

Nothing. The spec's parser only sets the properties it lists, so a typo or an outdated key like target-densitydpi has no effect rather than breaking the tag. The tool names it so you can remove or fix it.

Should I use commas or semicolons between values?

Commas. The W3C spec says authors should use commas so content works in all browsers, though some have also accepted semicolons. This tool accepts both when parsing.

Tools

humans.txt generator

humans.txt generator: build a humans.txt file with TEAM, THANKS and SITE sections from the humanstxt.org template. Free, runs in your browser.