What is the standard, recommended viewport meta tag value?

content="width=1024, initial-scale=1"

content="width=device-width, user-scalable=no"

content="initial-scale=0.8, maximum-scale=1"

What happens on a phone if a page has no viewport meta tag?

Many mobile browsers fall back to a legacy ~980px-wide layout and shrink the page, causing tiny text and horizontal scroll

The browser blocks the page from loading until one is added

The page automatically becomes responsive

Google refuses to index the page

Why is forcing user-scalable=no considered an anti-pattern?

It fails the W3C's accessibility conformance rule for zoom and blocks low-vision users, and iOS 10+ overrides it anyway

It slows down page load significantly

It permanently removes the page from Google's index

It disables responsive CSS media queries

Is the viewport meta tag a direct Google ranking factor?

No — Google documents its presence as a mobile-friendliness signal; the usability→ranking connection is industry inference, not a stated ranking mechanism

Yes — adding it directly boosts rankings

Yes — it's one of the top three ranking factors

No — and it has no relationship to SEO at all

How should you check your viewport tag now that Search Console's Mobile Usability report is gone?

Use Lighthouse or PageSpeed Insights

Reopen the Mobile-Friendly Test tool

Use the Mobile-Friendly Test API

Wait for Google to email you a report

Viewport Meta Tag

TL;DR — The viewport meta tagAn HTML head element — <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works. is one line in your page’s <head> that tells phones and tablets to render your page at the screen’s real width instead of pretending it’s a desktop monitor. Without it, your page shows up tiny and you have to pinch and scroll sideways to read it. The line you want is <meta name="viewport" content="width=device-width, initial-scale=1">.

What the viewport meta tag is

When smartphones first got web browsers, most websites were built for desktop screens. So many phone browsers cheated: without a viewport tag, they’d fall back to a fixed ~980 pixel wide layout — desktop-ish — lay the page out at that width, then shrink the whole thing down to fit the phone. The result was a readable-shaped page that was way too small to actually read, with text you had to pinch-zoom and content that spilled off the sides.

The viewport meta tag turns that off. It’s a single line you put in the <head> of your page:

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

width=device-width tells the browser “lay this page out at this device’s screen width, measured in CSS pixels” (not necessarily the same as its raw hardware-pixel count on a high-density screen), and initial-scale=1 says “and don’t zoom in or out when the page first loads.” That’s it. Copy that line, paste it near the top of your <head>, done.

Why it matters

Two reasons:

It makes your page readable on a phone. With the tag, text is legible without zooming and content fits the screen. Without it, you get the shrunk-down, tiny-text, horizontal-scroll experience.
It’s what makes “responsive designA mobile configuration that serves the same HTML on the same URL to every device and uses CSS media queries to adapt the layout to the viewport. It's Google's recommended setup and requires a correct viewport meta tag to work.” actually work. If your site uses modern responsive CSS (layouts that adapt to screen size), those rules are meant to kick in based on the browser’s actual screen width. The viewport tag is what tells it that width. Without it, your responsive breakpoints may not apply the way you designed them for mobile.

Most modern themes and site builders add this tag for you automatically. But older templates, hand-built pages, and some page builders miss it — which is why “viewport not set” still shows up in audits.

The mistake to avoid

You might see a version of this tag with user-scalable=no on the end — that’s someone trying to stop visitors from zooming so they can’t “break” the layout. Don’t do that. It stops people with low vision from zooming in to read your page, and modern iPhones ignore the setting anyway, so it does nothing except hurt accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all.. Leave zoom alone.

How this fits the rest of mobile SEO

The viewport tag is one small piece of the bigger mobile picture — it’s about how your page renders on a phone, which is different from mobile-first indexingGoogle's practice of using the mobile version of a page's content — crawled by Googlebot smartphone — for indexing and ranking. It is not a separate index and not a ranking boost. (about which version of your page Google reads). If you’re doing a full mobile pass, the mobile SEOMobile SEO is the practice of optimizing a site so it ranks well when crawled and indexed by a mobile (smartphone) user agent and delivers a fast, usable experience on phones. Since Google completed mobile-first indexing, the mobile version is the primary version Google uses for indexing and ranking — so mobile SEO is effectively baseline SEO for every site. hub, the mobile SEO checklist, and mobile-first indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. cover the rest.

Want the exact attribute reference, the accessibility details, and how to test the tag now that Google’s old Mobile-Friendly TestWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. is gone? Switch to the Advanced tab.

TL;DR — The viewport meta tagAn HTML head element — <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works. — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints the browser to size the layout viewport to the device’s width in CSS pixels instead of a legacy ~980px fallback some mobile browsers use, which is what lets responsive CSS media queries evaluate against the device’s real width on mobile. Missing or misconfigured, it’s a classic mobile usabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. failure (tiny text, horizontal scroll). It is not a ranking factor — Google documents its presence as one thing its mobile-friendliness evaluation checks for, and no more than that. Never force user-scalable=no / restrictive maximum-scale: it fails the W3C’s ACT accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. rule for zoom, though browser overrides exist (iOS 10+ ignores it by default). Google and Bing recommend the identical tag. Test with LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. / PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. — Search ConsoleA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results.’s Mobile UsabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. report and the Mobile-Friendly Test were retired December 1, 2023.

The problem it solves: the ~980px virtual viewport

To understand the tag you have to understand what it’s overriding. When mobile browsers were new, the lack of a viewport tag meant some of them would fall back to a fixed layout width of roughly 980px and render at that size — a deliberate accommodation so desktop-sized, pre-responsive sitesA mobile configuration that serves the same HTML on the same URL to every device and uses CSS media queries to adapt the layout to the viewport. It's Google's recommended setup and requires a correct viewport meta tag to work. wouldn’t completely break on early smartphones. The browser then scaled the result down to the physical screen. MDN’s own framing: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” — it’s a browser-specific fallback, not a universal spec constant.

The consequence, in Google’s own words: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.” You get unreadable text, forced pinch-zooming, and horizontal scrolling — the textbook symptoms of a page flagged “not mobile-friendly.”

Setting the tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.”

Layout viewport vs. visual viewport (under the hood)

Two “viewports” are in play, and it’s worth keeping them straight:

The layout viewport is the area the page lays out into and that fixed-position elements attach to. width=device-width sets this to the device’s screen width in CSS pixels.
The visual viewport is what the user is currently looking at — which changes when they pinch-zoom. Zooming changes the visual viewport without changing the layout viewport.

The reason this matters for SEO and CSS: your responsive media queries (@media (max-width: 600px) and friends) are evaluated against the layout viewport. If the layout viewport is stuck at a legacy ~980px fallback because there’s no viewport tag, a phone may match your desktop breakpoints instead of your narrow ones. MDN puts it plainly: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” The tag is what makes device-width the layout viewport so your intended breakpoints evaluate correctly.

The correct tag, and where it goes

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ...the rest of your head... -->
</head>

Put it high in the <head>, near charset, before content-dependent tags. This is the value Google, Bing, and LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. all recommend — verbatim, it’s the fix Lighthouse itself suggests. Don’t overthink the value: width=device-width, initial-scale=1 is the answer for essentially every responsive site.

Attribute reference

The content attribute is a comma-separated list of directives. MDN is the canonical attribute-by-attribute reference; here’s what each one does:

Directive	What it does	Notes
`width`	Controls the (minimum) pixel width of the viewport	A whole number 1–10000, or the special value `device-width` (the screen width in CSS pixels). Use `device-width`.
`initial-scale`	The zoom ratio between device width and viewport on load	A number `0.0`–`10.0`. Use `1`.
`minimum-scale`	The minimum zoom level allowed	Must be ≤ `maximum-scale`. iOS 10+ ignores it by default.
`maximum-scale`	The maximum zoom-in allowed	Must be ≥ `minimum-scale`. iOS 10+ ignores it by default. Don’t restrict it.
`user-scalable`	Whether the user can zoom (`yes`/`no`, default `yes`)	iOS 10+ ignores it by default. Setting `no` is an accessibility anti-pattern — leave it.
`interactive-widget`	How interactive UI (e.g. virtual keyboards) affect the viewport	Values: `resizes-visual` (default), `resizes-content`, `overlays-content`. Newer; most SEO content omits it.
`viewport-fit`	How the viewport handles display cutouts (notches)	Values: `auto` (default), `contain` (fits inside the largest rectangle that avoids the cutout), `cover` (fills the display — pair with CSS `env()` safe-area-inset variables so content doesn’t land under the cutout).

viewport-fit and interactive-widget are both browser-layout edge cases — display-cutout and virtual-keyboard handling, respectively — not SEO directives; most SEO-focused guides skip them entirely.

A small but real gotcha from Lighthouse’s own docs: setting initial-scale below 1 can trigger a legacy double-tap-to-zoom behavior that adds interaction delay — another reason to stick with initial-scale=1 rather than getting clever.

Never disable zoom: `user-scalable=no` is an anti-pattern

You’ll still find user-scalable=no (or maximum-scale=1) copy-pasted into old theme boilerplate, usually from a developer who didn’t want pinch-zoom “messing up” their layout. It’s wrong on two counts:

It fails the web’s own accessibility conformance test for zoom, and it works against WCAG’s intent. The W3C’s ACT rule “Meta viewport allows for zoom” (rule b4f0c3) applies to any viewport tag that sets user-scalable or maximum-scale, and its expectation is explicit: the tag must not set user-scalable=no, and maximum-scale must not be set below 2. (The rule carries stated assumptions — it doesn’t apply if the page has no visible content, offers another way to resize text, or never needs to reflow past a 320×256 CSS-pixel area — but a typical responsive page doesn’t meet those exceptions.) Per MDN: “Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.” Blocking zoom locks out the exact users who need it most.
It’s also browser-specific, not universal. iOS Safari 10 and later ignore user-scalable=no and restrictive maximum-scale by default — that’s an iOS override, not a change to the ACT rule or to WCAG’s intent. So on a large share of mobile traffic the setting accomplishes nothing, while on browsers that do still honor it (older Android WebViews, some in-app browsers) it actively fails the accessibility test above. Zero upside, real downside — and don’t treat “iOS ignores it” as proof the markup is accessible everywhere.

The rule is simple: don’t touch zoom. width=device-width, initial-scale=1 and nothing else.

Is it a ranking factor?

Be precise here, because a lot of SEO content overstates it. Here’s exactly what Google documents, and where the line to industry inference sits.

What Google documents: the viewport tag is not a direct ranking factor. Google’s own supported-meta-tags doc says plainly that “presence of this tag indicates to Google that the page is mobile friendly” — that’s the whole documented claim: presence signals mobile-friendliness. Google doesn’t document the tag as scored, as a renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. guarantee, or as proof a page’s responsive design is actually good.

Where practitioners connect the dots (industry inference, not a Google citation): a missing or misconfigured viewport tag is a common root cause of the mobile-usability failures (tiny text, horizontal scroll, unusable tap targets) that SEOs generally understand to degrade mobile page experienceGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data.. That connection is reasonable and widely held in the industry, but it’s a practitioner inference about why the tag matters — not something Google’s docs state as a ranking chain.

So the honest framing: the tag itself isn’t scored, and fix it because a page without it renders badly on phones — not because Google documents it as a ranking lever, direct or indirect. Keep this separate from mobile-first indexingGoogle's practice of using the mobile version of a page's content — crawled by Googlebot smartphone — for indexing and ranking. It is not a separate index and not a ranking boost. too: that’s a distinct Google Search concept about which version of your page Google primarily uses for indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. and ranking; the viewport tag is about how that mobile HTML renders in a browser, full stop.

How to test it — the tooling changed in 2023

This is where most older guides are stale. On December 1, 2023, Google retired Search ConsoleGoogle's free tool for monitoring crawling, indexing, and search performance.’s Mobile Usability report, the Mobile-Friendly Test tool, and the Mobile-Friendly Test API (announced April 2023, confirmed complete that December). Google’s reasoning was that other tools had matured — “many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” So if a tutorial tells you to open Search Console → Mobile Usability to check your viewport, that report no longer exists.

Layer these checks rather than relying on one tool: confirm the tag exists in the raw served HTML (not just after JavaScript runs), confirm your responsive breakpoints actually apply at phone widths, test zooming to 200% without the layout breaking (the resize behavior WCAG’s intent is built around), and spot-check in more than one browser — an iOS Safari-only check can hide a zoom-restriction bug that Android or in-app browsers still enforce.

Your current toolkit:

Lighthouse (in Chrome DevTools). The relevant audit historically read “Does not have a <meta name="viewport"> tag with width or initial-scale” — it fails unless the <head> has a meta name="viewport" whose content includes width=. As of Lighthouse 13 it’s folded into the “Optimize viewport for mobile” insight.
PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. — runs Lighthouse plus field Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data. data.
Chrome DevTools device toolbar — emulate phone dimensions and eyeball it.
Bing’s Mobile Friendliness Test Tool — Bing checks viewport and zoom-control configuration too, and recommends the same tag Google does.
View source / real-device check — sometimes the fastest test is to just look at the <head> on your phone.

Common mistakes

No tag at all (“viewport not set”) — the page renders at the legacy desktop-ish width and shrinks.
A hardcoded pixel width like width=1024 instead of device-width — a tag exists, but it still doesn’t match the page to the device. Lighthouse and real mobile-friendliness both want a usable width= value, not just any tag.
initial-scale below 1 — can trigger the legacy double-tap-zoom delay.
user-scalable=no / restrictive maximum-scale — copy-pasted from old boilerplate; accessibility anti-pattern, ignored on iOS anyway.

For where this sits in the broader mobile work — configuration, content parity, speed — see the mobile SEOMobile SEO is the practice of optimizing a site so it ranks well when crawled and indexed by a mobile (smartphone) user agent and delivers a fast, usable experience on phones. Since Google completed mobile-first indexing, the mobile version is the primary version Google uses for indexing and ranking — so mobile SEO is effectively baseline SEO for every site. hub, the mobile SEO checklist, and mobile-first indexing. For the tag itself as part of the wider on-page tag family, the meta tagsMeta tags are HTML elements in a page's head that pass metadata about the page to search engines and browsers. For SEO only a few matter — the title element, the meta description, and the robots meta tag — while meta keywords and most others are ignored. cluster is the map.

AI summary

A condensed take on the Advanced version:

The viewport meta tagAn HTML head element — <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works. — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints browsers to size the layout viewport to the device’s width in CSS pixels instead of a legacy ~980px fallback some mobile browsers use. It’s what lets responsive CSS media queries evaluate against the device’s real width on mobile.
Without it: some mobile browsers render the page at that wider fallback and shrink it — tiny text, horizontal scroll, breakpoints that may not apply as intended. Google: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down.”
Layout viewport vs. visual viewport: width=device-width sets the layout viewport (what media queries evaluate against) and acts as a minimum width; pinch-zoom changes the visual viewport only.
Attributes: width, initial-scale, minimum-scale, maximum-scale, user-scalable, and the newer interactive-widget and viewport-fit (both browser-layout edge cases, not SEO directives). Use width=device-width, initial-scale=1 and nothing else.
Never disable zoom: user-scalable=no / a maximum-scale below 2 fails the W3C’s ACT rule for zoom (b4f0c3) and works against WCAGWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all.’s resize intent — and iOS 10+ overrides it by default, so it’s an accessibility downside with zero upside anywhere.
Ranking: Google documents only that presence “indicates to Google that the page is mobile friendly” — not that the tag is scored, and not a stated ranking chain through usability signals (that link is industry inference, not a Google citation). Distinct from mobile-first indexingGoogle's practice of using the mobile version of a page's content — crawled by Googlebot smartphone — for indexing and ranking. It is not a separate index and not a ranking boost. (which version is indexedStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed., not how it renders).
Testing changed: Search ConsoleA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results.’s Mobile Usability reportWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals., the Mobile-Friendly Test tool, and its API were retired Dec 1, 2023 — use LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal., PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking., DevTools device toolbar, or Bing’s Mobile Friendliness Test; layer in a 200%-zoom check and more than one browser.
Common mistakes: no tag, hardcoded width=1024, initial-scale < 1, copy-pasted user-scalable=no. Google and Bing recommend the identical value.

Official documentation

Primary-source documentation and standards references.

Google

Meta tags and attributes that Google supports — lists the viewport tag and states its presence “indicates to Google that the page is mobile friendly.” The current, live source (Google’s dedicated older configure-viewport doc has been retired).
Does not have a <meta name="viewport"> tag with width or initial-scale (Lighthouse) — the audit definition, the desktop-width-fallback explanation, and the recommended fix code.
What the Viewport? — Chrome for Developers / web.dev on the legacy ~980px default and layout vs. visual viewport.
The role of page experience in creating helpful content (Apr 2023) — where Google announced the Dec 1, 2023 retirement of the Mobile Usability reportWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. and Mobile-Friendly Test tool/API, pointing to LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal..

Standards / technical reference

<meta name="viewport"> (MDN Web Docs) — the primary attribute-by-attribute reference: width, initial-scale, minimum-scale, maximum-scale, user-scalable, interactive-widget, viewport-fit, the iOS 10+ override behavior, and the WCAGWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. accessibility warning.
MDN: Responsive design — the viewport meta tag — the plain statement that breakpoints and media queries “may not work as intended” without the tag.
MDN: CSS viewport concepts — qualifies the ~980px fallback to “some mobile browsers,” not a universal default.
W3C WAI: ACT rule “Meta viewport allows for zoom” (b4f0c3) — the precise accessibility conformance test: user-scalable=no and maximum-scale under 2 fail, with the rule’s own applicability and assumptions spelled out.

Bing / Microsoft

Bing’s Mobile Friendliness Test Tool (in Bing Webmaster ToolsMicrosoft's free portal for monitoring and improving how a site appears in Bing search — the peer to Google Search Console, plus IndexNow instant indexing, richer backlink data, and keyword volumes. Because Bing's index also feeds Microsoft Copilot, it doubles as a window into AI-search visibility.) evaluates viewport and zoom-control configuration, content width, text readability, tap-target spacing, and incompatible plug-ins, and recommends the same width=device-width, initial-scale=1 value Google does. (Bing help-doc URLs move periodically; check the current Bing Webmaster ToolsThe free, first-party consoles search engines give site owners — Google Search Console and Bing Webmaster Tools — to see how their pages are crawled, indexed, and ranked, and to fix problems. The legacy name is 'webmaster tools.' help center for the live page.)

Quotes from the source

On-the-record statements from Google’s documentation and MDN. Each link jumps to the quoted passage on the source page where a deep link is available.

Google — what the tag does and why

“Without a viewport meta tagAn HTML head element — <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works., mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” — LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. / Chrome for Developers (Google). Jump to quote
“Presence of this tag indicates to Google that the page is mobile friendly.” — Meta tagsMeta tags are HTML elements in a page's head that pass metadata about the page to search engines and browsers. For SEO only a few matter — the title element, the meta description, and the robots meta tag — while meta keywords and most others are ignored. and attributes that Google supports, Google Search Central docs. Read the doc

MDN — the accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. warning

“Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.” — MDN Web Docs. Read the reference
On user-scalable, minimum-scale, and maximum-scale: “Browser settings can ignore this rule, and iOS10+ ignores it by default.” Read the reference

W3C — the accessibility conformance test for zoom

Applicability: “This rule applies to each content attribute on a meta element with a name attribute value of viewport for which at least one of the following is true: the content attribute value has the user-scalable property; or the content attribute value has the maximum-scale property.” Expectation: the attribute value must not set user-scalable to no, and must not set maximum-scale below 2. — W3C WAI, ACT rule “Meta viewport allows for zoom” (b4f0c3). Read the rule

MDN — qualifying the legacy fallback and breakpoint behavior

“If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” — MDN, CSS viewport concepts. Read the reference
“Without it, your responsive designA mobile configuration that serves the same HTML on the same URL to every device and uses CSS media queries to adapt the layout to the viewport. It's Google's recommended setup and requires a correct viewport meta tag to work. with breakpoints and media queries may not work as intended on mobile browsers.” — MDN, Responsive design guide. Read the reference

Google — retiring the mobile tools (Dec 2023) (via Search Engine Land’s verbatim coverage)

“In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. have emerged, including LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. from Chrome.” Read the coverage

Note: the Meta-tags doc and MDN reference render fine, but the December 2023 tool-retirement statement is linked through Search Engine Land’s verbatim coverage of Google’s announcement (the original was posted on Google’s blog and social channels); confirm against the live Google post before treating it as final. The Google Search Central meta-tags page is cited without a text-fragment deep link because its content loads client-side.

Which viewport configuration should I use?

For almost every site the answer is the same one line — but people talk themselves into “clever” variants that cause problems. Click through to land on the right value (and to rule out the anti-patterns).

Choosing your viewport meta tag value

Viewport tag checklist

A quick pass to confirm the tag is present and sane:

Viewport meta tag — cheat sheet

The one line you want

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

Google, Bing, and LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. all recommend this exact value.

Attribute reference

Directive	Use	Notes
`width`	`device-width`	Or 1–10000 px; use `device-width`.
`initial-scale`	`1`	0.0–10.0; below 1 triggers double-tap-zoom delay.
`minimum-scale`	(omit)	iOS 10+ ignores.
`maximum-scale`	(omit)	iOS 10+ ignores; don’t restrict zoom.
`user-scalable`	(omit; default `yes`)	`no` = fails the zoom accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. rule; iOS 10+ overrides it.
`interactive-widget`	(optional)	`resizes-visual` (default) / `resizes-content` / `overlays-content`.

Symptoms of a missing/broken tag

Tiny, unreadable text on mobile.
Horizontal scrolling / pinch-to-zoom needed.
Responsive breakpoints not applying as intended on phones.
“Viewport not set” in an audit.

Do / Don’t

✅ width=device-width, initial-scale=1, high in <head>.
❌ Hardcoded width=1024.
❌ initial-scale below 1.
❌ user-scalable=no / maximum-scale=1.

Ranking reality: not a direct ranking factor. Google documents only that its presence indicates mobile-friendliness — the usability→page-experience chain is industry inference, not a Google-documented ranking mechanism.

Test with: LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. · PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. · Chrome DevTools device toolbar · Bing Mobile FriendlinessWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. Test. Not the Mobile-Friendly Test or Search ConsoleA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results. Mobile UsabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. report — both retired Dec 1, 2023.

Viewport anti-patterns

The four ways people get this tag wrong, and what to do instead.

1. Disabling zoom (user-scalable=no / maximum-scale=1). The intent is usually “stop pinch-zoom from breaking my layout.” The reality: it fails the W3C’s accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. conformance rule for zoom and locks low-vision users out of scaling text, and iOS 10+ overrides it by default — so it does nothing on a huge share of traffic while still failing that accessibility test on the browsers that do honor it. Fix: remove it entirely; keep only width=device-width, initial-scale=1.

2. Hardcoding a pixel width (width=1024). A viewport tag exists, so audits sometimes half-pass, but the page is still pinned to a fixed width that doesn’t match real devices. Fix: use width=device-width.

3. initial-scale below 1 to “fit more on screen.” Shrinking the initial zoom can trigger the legacy double-tap-to-zoom behavior that adds interaction delay, and it makes text smaller for everyone. Fix: initial-scale=1 and let your responsive CSS handle layout.

4. Relying on the retired GSCA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results. Mobile Usability reportWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. to catch problems. That report, the Mobile-Friendly Test tool, and its API were retired December 1, 2023. If your QA process still says “check Mobile UsabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals.,” it’s silently doing nothing. Fix: audit with LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. / PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. instead.

Bonus — treating the tag as a ranking lever. It’s not one. Adding it won’t lift rankings; it just makes the page render correctly so it can pass the mobile-friendliness checks that do feed page experienceGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data.. Set it once, correctly, and move on.

Check and audit your viewport tag

Ways to verify the tag across a page or a whole site, from a quick console snippet to a crawl.

DevTools console — inspect the current page’s viewport tag

// Paste into the Chrome DevTools console on the page you're checking.
const vp = document.querySelector('meta[name="viewport"]');
if (!vp) {
  console.warn('❌ No viewport meta tag — "viewport not set".');
} else {
  const c = vp.getAttribute('content') || '';
  console.log('viewport content:', c);
  console.log(/width\s*=\s*device-width/i.test(c) ? '✅ width=device-width' : '⚠️ width is not device-width');
  console.log(/user-scalable\s*=\s*no/i.test(c) || /maximum-scale\s*=\s*[01](\.0)?\b/i.test(c)
    ? '⚠️ zoom is restricted — accessibility anti-pattern' : '✅ zoom not restricted');
}

Bookmarklet — one-click check

javascript:(function(){var v=document.querySelector('meta[name=viewport]');alert(v?('viewport: '+v.content):'NO VIEWPORT TAG (viewport not set)');})();

Shell — fetch a URL and grep the raw HTML head

# Prints the viewport tag from a page's server-rendered HTML (or nothing if absent).
curl -s https://example.com | grep -io '<meta[^>]*name=["'\'']*viewport[^>]*>'

Shell — flag pages that restrict zoom across a list of URLs

# urls.txt = one URL per line. Prints any page whose viewport disables/limits zoom.
while read -r u; do
  html=$(curl -s "$u")
  echo "$html" | grep -iq 'name=["'\'']*viewport' || { echo "MISSING  $u"; continue; }
  echo "$html" | grep -io '<meta[^>]*viewport[^>]*>' | grep -Eiq 'user-scalable=no|maximum-scale=[01]' \
    && echo "ZOOM-OFF $u"
done < urls.txt

Regex — match the tag in source (for a code search / linter rule)

<meta[^>]+name=["']?viewport["']?[^>]*>

To flag the anti-pattern specifically, search for:

viewport[^>]*(user-scalable\s*=\s*no|maximum-scale\s*=\s*[01])

For a whole-site sweep, a crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. (Screaming Frog, Ahrefs Site Audit) is faster than scripting — see the Tools tab.

Patrick's relevant free tools

Mobile-Friendly Tester — Run a seven-part mobile-layout diagnostic — a 0–100 product score for viewport, responsive CSS, fixed widths, font sizes, images, page weight, and plugins, plus a separate phone-viewport preview.
SERP Snippet & Truncation Checker — Measure title-tag and meta-description widths with consistent font stand-ins and compare them with configurable desktop and mobile preview guidance. Single check or bulk CSV — runs entirely in your browser, nothing is uploaded.
Google SERP Simulator — Interactive Google result preview: type a title, description, and URL, compare controlled-font desktop + mobile truncation guidance with simulated query bolding, copy the finished tags, and share a filled-in preview.

Tools for checking the viewport tag

LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. (Chrome DevTools → LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal., or the CLI) — the direct replacement for the retired Mobile-Friendly TestWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals.; runs the viewport audit (“Optimize viewport for mobile” in Lighthouse 13+) plus the rest of mobile usabilityWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals. and performance.
PageSpeed InsightsPageSpeed Insights (PSI) is a free Google tool at pagespeed.web.dev that reports two kinds of data for a URL: real-user field data from the Chrome UX Report and a single Lighthouse lab run with the 0–100 Performance score. Only the field Core Web Vitals are what Google uses for ranking. — Lighthouse in the browser, with field Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data. data alongside the lab audit.
Chrome DevTools device toolbar — toggle device emulation and eyeball the page at phone dimensions; the fastest way to see a broken viewport.
Bing Mobile Friendliness Test Tool (Bing Webmaster ToolsMicrosoft's free portal for monitoring and improving how a site appears in Bing search — the peer to Google Search Console, plus IndexNow instant indexing, richer backlink data, and keyword volumes. Because Bing's index also feeds Microsoft Copilot, it doubles as a window into AI-search visibility.) — checks viewport and zoom-control configuration and recommends the same tag.
Screaming Frog SEO SpiderA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. / Ahrefs Site Audit — crawl the whole site and surface pages missing the viewport tag (or restricting zoom) at scale, instead of checking URLs one at a time.
View source on your phone — the lowest-tech check: is the tag actually in the <head> of the served HTML?

Note the retirements: Search ConsoleA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results.’s Mobile Usability report, the Mobile-Friendly Test tool, and the Mobile-Friendly Test API were all retired on December 1, 2023 — don’t reach for them.

The viewport tag is present but the page still looks desktop-sized

Symptom: source contains a viewport tag, yet phones show tiny text or a wide layout. Likely cause: there are duplicate viewport tags, the tag is injected too late, or the responsive CSS never loads. Fix: keep one tag in the server-rendered <head>, remove conflicting copies, and verify that the expected media queries are applied in the rendered page.

Mobile layout works at first and then jumps wider

Symptom: the initial layout fits, then horizontal scrolling appears after load. Likely cause: JavaScript adds a fixed-width widget, table, banner, or iframeHTML element that displays one webpage inside another — how embeds work. after the viewport is established. Fix: inspect the rendered DOM at the moment overflow starts and constrain the injected element. Changing the viewport value cannot repair an element that is intrinsically wider than the screen.

Pinch zoom is blocked

Symptom: users cannot zoom, even though the page otherwise fits. Likely cause: user-scalable=no or a restrictive maximum-scale remains in the viewport content. Fix: remove those restrictions and retest with browser zoom and OS text scaling. Do not treat an iOS override as proof that the markup is accessible everywhere.

A crawler reports the tag missing but the browser shows it

Symptom: a rendered browser sees the tag, while a raw-HTML crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. does not. Likely cause: client-side JavaScript inserts it. Fix: emit the tag in the initial document head. A foundational renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. instruction should not depend on a script running successfully.

Validate a viewport-tag change

Test to run	Expected result	Failure interpretation	Monitoring window	Rollback trigger
View the initial HTML response and inspect `<head>`	Exactly one viewport tag contains `width=device-width, initial-scale=1`	The tag is missing, duplicated, or dependent on JavaScript	Every template release	Roll back if a shared template removes or duplicates the tag
Load the page at several phone widths in DevTools	CSS media queries activate at the intended widths and content fits	The viewport is correct but responsive CSS or a fixed-width child is broken	Before and immediately after deployment	Roll back if primary content or navigation becomes unusable
Run LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. with a mobile profile	The viewport audit passes	The served or rendered configuration still prevents a mobile-sized layout	Before and after the change	Roll back if the change introduces another high-impact mobile failure
Test pinch zoom and increased text size on a physical phone	Users can zoom and text reflows without clipping	Scaling restrictions or fixed-height components remain	Release day and after design-system changes	Roll back if essential controls cannot be reached at enlarged text sizes
Crawl a sample from every page template using raw HTML	Every sample exposes the same valid tag in the head	A template or renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. path has inconsistent markup	After deployment and in scheduled template QA	Roll back the affected template if pages revert to the legacy desktop viewport

Resources worth your time

My related writing

The Beginner’s Guide to Technical SEO — where mobile renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. and page experienceGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data. fit the bigger technical picture.
Core Web Vitals: What They Are & How to Improve Yours — the performance side of the mobile experience that sits next to the viewport tag.

My speaking

How Search Works (SlideShare) — my walkthrough of crawlingCrawling is how search engines use automated bots (like Googlebot and Bingbot) to discover URLs and download pages. A page has to be crawlable to be indexed, but crawling on its own isn't a ranking factor., renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM., indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed., and ranking, including how GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. crawls and renders as a smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)

From around the industry

<meta name="viewport"> (MDN Web Docs) — the precise attribute-by-attribute reference, iOS override behavior, and the WCAGWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. accessibility warning.
Does not have a <meta name="viewport"> tag with width or initial-scale (Lighthouse) (Chrome for Developers) — the audit definition, the desktop-width-fallback explanation, and the recommended fix.
What the Viewport? (Chrome for Developers) — the legacy ~980px default and layout vs. visual viewport, explained by Google.
Meta tags and attributes that Google supports (Google Search Central) — the current doc that names the viewport tag as a mobile-friendliness signal.
Google Officially Drops Mobile Usability Report, Mobile-Friendly Test Tool and API (Search Engine Land) — the December 2023 retirements and the LighthouseLighthouse is Google's free, open-source tool that audits a page under simulated lab conditions and scores it 0–100 across Performance, Accessibility, Best Practices, and SEO. It's lab data — useful for debugging, not a ranking signal. recommendation.
You can stop using user-scalable=no and maximum-scale=1 in viewport meta tags now (Luke Plant) — background on why the restrictive zoom attributes existed and why they’re obsolete and overridden on iOS.
A Beginner’s Guide to Viewport Meta Tags (Semrush) — a well-rounded competitor explainer covering interactive-widget, the iOS 10 override, and the WCAG warning.

Test yourself: Viewport Meta Tag

Five quick questions on the viewport meta tagAn HTML head element — <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works.. Pick an answer for each, then check.

Viewport Meta Tag

An HTML head element — <meta name="viewport" content="width=device-width, initial-scale=1"> — that hints mobile browsers to size the layout viewport to the device's width in CSS pixels instead of a legacy ~980px fallback, so responsive design works.

Viewport Meta Tag

The viewport meta tag is an HTML <head> element that hints mobile browsers how to size the layout viewport and at what initial zoom level. The standard, recommended value is <meta name="viewport" content="width=device-width, initial-scale=1">.

Without it, some mobile browsers fall back to a legacy desktop-width virtual viewport (historically around 980px) — they render the page at that wider width and then shrink it to fit the screen, producing tiny, unreadable text and forced horizontal scrolling, and responsive breakpoints that may not apply as intended. Setting width=device-width maps the layout viewport to the device’s screen width in CSS pixels (not the device’s raw hardware-pixel count) and acts as a minimum viewport width. initial-scale=1 sets a 1:1 ratio between CSS pixels and device-independent pixels on load.

The tag is not itself a ranking factor. Google’s documentation states only that the tag’s presence indicates a page is mobile-friendlyWhether a page is easy to use on a mobile/touch device — legible text without zooming, tap targets sized and spaced to avoid mis-taps, content that fits the viewport with no horizontal scrolling, and no intrusive interstitials. Distinct from mobile-first indexing and Core Web Vitals.; the widely-held industry view that a missing tag’s usability failures feed page-experience ranking signals is a reasonable practitioner inference, not something Google documents directly. Forcing user-scalable=no or a maximum-scale below 2 fails the W3C’s ACT accessibilityWeb accessibility means designing sites so people with disabilities can use them, per the W3C's WCAG guidelines. It overlaps with SEO in specific, checkable ways — alt text, heading structure, descriptive link text, captions, and page speed all serve both audiences — but Google has said accessibility itself is not a ranking factor, and most WCAG success criteria (keyboard focus order, ARIA live regions, form labels) have no SEO effect at all. conformance rule for zoom (and works against WCAG’s resize intent) — though iOS 10+ overrides the restriction by default, which is a browser-specific behavior, not proof the markup is accessible everywhere.

Build-time retrieval analysis plus live signals for this exact article. The automatic chunk report includes a deterministic readiness score and is ready without a model download.

How this article chunks build baseline · local controls

A structure-aware retrieval preview using the shared Chunk Tester engine. The default lens is shown immediately; switch scopes to see what happens when every authored lens is treated as one source document.

Target size 300 tokens Overlap 15% Retrieval query

79readiness score / 100

10chunks

~336median tokens

100%standalone

6flagged chunks

Advanced lens only — the version readers see when this page opens.

Baseline generated at build time with a 300-token target and 15% overlap. Controls re-run the same deterministic engine in this browser.

Matching retrieval chunks

Ranked lexically for the page title, Trends, and Ngram terms. Enter a short query to test a different retrieval intent.

chunk 3 ~351 tok Layout viewport vs. visual viewport (under the hood)

• The **visual viewport** is what the user is currently looking at — which changes when they pinch-zoom. Zooming changes the visual viewport without changing the layout viewport. The reason this matters for SEO and CSS: …

chunk 7 ~304 tok Never disable zoom: `user-scalable=no` is an anti-pattern

• **It's also browser-specific, not universal.** iOS Safari 10 and later *ignore* `user-scalable=no` and restrictive `maximum-scale` by default — that's an iOS override, not a change to the ACT rule or to WCAG's intent. …

chunk 1 ~418 tok Default visible lens

Viewport Meta Tag **TL;DR —** The viewport meta tag — ` ` — hints the browser to size the **layout viewport** to the device's width in CSS pixels instead of a legacy ~980px fallback some mobile browsers use, which is wha…

chunk 2 ~405 tok The problem it solves: the ~980px virtual viewport

To understand the tag you have to understand what it's overriding. When mobile browsers were new, the lack of a viewport tag meant **some of them** would fall back to a fixed layout width of roughly **980px** and render …

chunk 9 ~431 tok How to test it — the tooling changed in 2023

This is where most older guides are stale. On **December 1, 2023**, Google **retired Search Console's Mobile Usability report, the Mobile-Friendly Test tool, and the Mobile-Friendly Test API** (announced April 2023, conf…

Methodology and limits

The readiness score starts with the percentage of standalone chunks and subtracts up to 35 points for the share carrying structural warnings. Structure-aware Markdown blocks use the selected 100–800-token target and 0–40% overlap. Tokens are estimated at roughly four English characters each. “Standalone” means a chunk has heading context and does not open with a context-dependent continuation.

Matching uses the shared lexical BM25 and term-cosine ranker. It is not an embedding or a replica of Google, an answer engine, or any vendor retriever. These chunk controls keep the article text in this browser and make no network request. The build-time baseline remains the reproducible report for this page.

Test your own content in Chunk Tester →

77readiness score / 100

29chunks

~338median tokens

100%standalone

19flagged chunks

All 15 authored lenses in this article source, with lens boundaries retained as headings.

Baseline generated at build time with a 300-token target and 15% overlap. Controls re-run the same deterministic engine in this browser.

Matching retrieval chunks

Ranked lexically for the page title, Trends, and Ngram terms. Enter a short query to test a different retrieval intent.

chunk 5 ~338 tok The problem it solves: the ~980px virtual viewport

Setting the tag *"lets you control the width and scaling of the viewport so that it's sized correctly on all devices."* Layout viewport vs. visual viewport (under the hood) Two "viewports" are in play, and it's worth kee…

chunk 2 ~416 tok What the viewport meta tag is

The **viewport meta tag** turns that off. It's a single line you put in the ` ` of your page: <meta name="viewport" content="width=device-width, initial-scale=1"> `width=device-width` tells the browser "lay this page out…

chunk 18 ~318 tok Quotes from the source

• Applicability: *"This rule applies to each `content` attribute on a `meta` element with a `name` attribute value of `viewport` for which at least one of the following is true: the `content` attribute value has the `use…

chunk 9 ~304 tok Never disable zoom: `user-scalable=no` is an anti-pattern

• **It's also browser-specific, not universal.** iOS Safari 10 and later *ignore* `user-scalable=no` and restrictive `maximum-scale` by default — that's an iOS override, not a change to the ACT rule or to WCAG's intent. …

chunk 15 ~322 tok Official documentation

• Meta tags and attributes that Google supports — lists the viewport tag and states its presence "indicates to Google that the page is mobile friendly." The current, live source (Google's dedicated older `configure-viewp…

Methodology and limits

The readiness score starts with the percentage of standalone chunks and subtracts up to 35 points for the share carrying structural warnings. Structure-aware Markdown blocks use the selected 100–800-token target and 0–40% overlap. Tokens are estimated at roughly four English characters each. “Standalone” means a chunk has heading context and does not open with a context-dependent continuation.

Matching uses the shared lexical BM25 and term-cosine ranker. It is not an embedding or a replica of Google, an answer engine, or any vendor retriever. These chunk controls keep the article text in this browser and make no network request. The build-time baseline remains the reproducible report for this page.

Test your own content in Chunk Tester →

Search Console

Loading…

GA4 traffic (28d)

Loading…

Cloudflare traffic (7d)

Loading…

CrUX field data (28d, phone)

Loading…

Google NLP entities

Loading…

Changelog

Updated Jul 18, 2026.

Editorial summary and recorded change details.

Summary

Corrected overgeneralized rendering and accessibility claims per structured research review: qualified the ~980px fallback and media-query behavior to "some/many mobile browsers" instead of universal, replaced the blanket "WCAG violation" framing with the specific W3C ACT rule (b4f0c3) it fails, and separated Google's documented mobile-friendliness signal from the industry's inference about page-experience ranking.

Change details

Tied the zoom-accessibility guidance to the W3C ACT rule "Meta viewport allows for zoom" (b4f0c3) — its exact expectation, applicability, and stated assumptions — instead of a blanket WCAG-violation claim.
Qualified the legacy ~980px virtual-viewport fallback and the media-query-breakage claim to "some/many mobile browsers," citing MDN's CSS viewport and responsive-design guides, instead of presenting it as universal browser behavior.
Rewrote the ranking-factor section to state only what Google's docs document (presence indicates mobile-friendliness) and to label the usability-to-page-experience connection as industry inference, not a Google-documented ranking chain.
Corrected width=device-width framing from "the device's actual/real width" to a browser sizing hint in CSS pixels that acts as a minimum viewport width, per MDN.
Added a viewport-fit attribute-reference row and layered testing guidance (raw markup, breakpoints, 200% zoom, multiple browsers), and refreshed the MDN citation to its current canonical URL.

Full comparison unavailable — no prior snapshot was archived for this revision.

Viewport Meta Tag

What the viewport meta tag is

Why it matters

The mistake to avoid

How this fits the rest of mobile SEO

The problem it solves: the ~980px virtual viewport

Layout viewport vs. visual viewport (under the hood)

The correct tag, and where it goes

Attribute reference

Never disable zoom: user-scalable=no is an anti-pattern

Is it a ranking factor?

How to test it — the tooling changed in 2023

Common mistakes

AI summary

Official documentation

Quotes from the source

Which viewport configuration should I use?

Viewport tag checklist

Viewport meta tag — cheat sheet

Viewport anti-patterns

Check and audit your viewport tag

Patrick's relevant free tools

Tools for checking the viewport tag

The viewport tag is present but the page still looks desktop-sized

Mobile layout works at first and then jumps wider

Pinch zoom is blocked

A crawler reports the tag missing but the browser shows it

Validate a viewport-tag change

Resources worth your time

Test yourself: Viewport Meta Tag

Viewport Meta Tag

Viewport Meta Tag

How this article chunks build baseline · local controls

Matching retrieval chunks

Flagged retrieval chunks

Matching retrieval chunks

Flagged retrieval chunks

Google Trends Viewport meta tag · Responsive design

Books Ngram viewport meta tag · width device-width

Changelog

Updated Jul 18, 2026.

Summary

Change details

People also ask

Never disable zoom: `user-scalable=no` is an anti-pattern