Meta Viewport Test

What is it?

The viewport meta tag controls how your page's layout scales on mobile devices. Without it, mobile browsers render the page at a default desktop width and shrink the result to fit the screen, producing unreadable text and unusable touch targets. The fix is a single line of HTML in the document head. The MDN reference documents every supported attribute.

Why the viewport meta tag still matters in 2026

The viewport tag is the foundation that responsive design rests on. Without it, no amount of media queries or flexible CSS can save the page on mobile, because the browser never gives the layout a chance to adapt to the device. With it, the layout receives the device's actual width and can render appropriately for that screen size. Because Google now indexes the web mobile-first, the mobile rendering is also the version that gets crawled, evaluated, and ranked.

The minimal correct declaration, width=device-width, initial-scale=1, works for essentially every responsive design. There is rarely a reason to deviate from it, and several things to avoid: do not disable user scaling (user-scalable=no) because it harms accessibility for users who need to zoom, do not declare a fixed pixel width because it forces a desktop layout on every device, and do not include multiple viewport tags because only the first one wins.

Common mistakes worth checking

Tag missing entirely, leaving mobile browsers to apply their own defaults.
Fixed width in the tag, such as width=1024, which forces a desktop layout on mobile.
User scaling disabled, harming accessibility for users who need to zoom.
Multiple viewport tags, often added by separate plugins or templates.

This test verifies that your page declares a viewport meta tag and that its content is sensible. The fix guide below covers adding the tag in raw HTML and confirming it is present in the major content management systems, where it is usually included by default.

Pass rate:

Top 100 websites: 92%
This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
All websites: 97%
This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.

Pass rates of Top 100 US websites
2021	94%
2022	90%
2023	88%
2024	92%

100

How do I fix it?

The viewport meta tag controls how the layout scales on mobile devices. Without it, mobile browsers render the page at a default desktop width and shrink it to fit, producing unreadable text and unusable touch targets. Fixing this issue means adding a single, correctly configured viewport meta tag inside the <head>. See the MDN reference for the full attribute list.

Example

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Where to make the change

Raw HTML: add the meta tag inside the <head> on every page.
WordPress, Shopify, Wix, Squarespace: all major CMS platforms include the viewport tag in their default templates. If the test still fails, a custom theme is overriding the head.
Headless or framework sites: the framework's base layout file should include the tag; most starters do.

Common causes and how to resolve them

Tag is missing: add it. The minimal correct value is width=device-width, initial-scale=1.
Fixed width in the tag: width=1024 or similar forces a desktop layout on mobile. Use device-width instead.
User scaling disabled: avoid user-scalable=no, maximum-scale=1, or minimum-scale=1. They harm accessibility for users who need to zoom.
Multiple viewport tags: only the first one wins. Remove duplicates a plugin or template may have added.

Best practices

Stick to width=device-width, initial-scale=1: the safest default for nearly every responsive site.
Allow user zoom: never disable it. Accessibility regulations and most usability guides treat this as a baseline requirement.
Pair with responsive CSS: the meta tag enables responsive design, but the layout itself must be built with media queries or modern responsive units.