Meta Tag de Viewport

«> TL;DR — The viewport meta tag 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">. » (Tradução) (Síntese localizada do trecho três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

« Evidência desta afirmação The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Escopo: Browser viewport behavior. Confiança: alta · Verificado: 2026-07-14 MDN: Viewport meta tag Evidência desta afirmação Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Escopo: WCAG resize-text requirement and viewport guidance. Confiança: alta · Verificado: 2026-07-14 W3C WAI: Understanding Resize Text » (Tradução) (Síntese localizada do trecho quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## What the viewport meta tag is » (Tradução) (Síntese localizada do trecho cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«The viewport meta tag turns that off. It’s a single line you put in the <head> of your page: » (Tradução) (Síntese localizada do trecho sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

<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. » (Tradução) (Síntese localizada do trecho nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Why it matters » (Tradução) (Síntese localizada do trecho dez, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Two reasons: » (Tradução) (Síntese localizada do trecho onze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- 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 design” 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. » (Tradução) (Síntese localizada do trecho doze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho treze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## The mistake to avoid » (Tradução) (Síntese localizada do trecho catorze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 accessibility. Leave zoom alone. » (Tradução) (Síntese localizada do trecho quinze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## How this fits the rest of mobile SEO » (Tradução) (Síntese localizada do trecho dezesseis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 indexing (about which version of your page Google reads). If you’re doing a full mobile pass, the mobile SEO hub, the mobile SEO checklist, and mobile-first indexing cover the rest. » (Tradução) (Síntese localizada do trecho dezessete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Want the exact attribute reference, the accessibility details, and how to test the tag now that Google’s old Mobile-Friendly Test is gone? Switch to the Avançado tab. » (Tradução) (Síntese localizada do trecho dezoito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«> TL;DR — The viewport meta tag —

<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 usability 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 accessibility rule for zoom, though browser overrides exist (iOS 10+ ignores it by default). Google and Bing recommend the identical tag. Test with Lighthouse / PageSpeed Insights — Search Console’s Mobile Usability report and the Mobile-Friendly Test were retired December 1, 2023. » (Tradução) (Síntese localizada do trecho vinte e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

« Evidência desta afirmação The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Escopo: Browser viewport behavior. Confiança: alta · Verificado: 2026-07-14 MDN: Viewport meta tag Evidência desta afirmação Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Escopo: WCAG resize-text requirement and viewport guidance. Confiança: alta · Verificado: 2026-07-14 W3C WAI: Understanding Resize Text » (Tradução) (Síntese localizada do trecho vinte e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## The problem it solves: the ~980px virtual viewport » (Tradução) (Síntese localizada do trecho vinte e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 sites 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. » (Tradução) (Síntese localizada do trecho vinte e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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.” » (Tradução) (Síntese localizada do trecho vinte e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Setting the tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” » (Tradução) (Síntese localizada do trecho vinte e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Layout viewport vs. visual viewport (under the hood) » (Tradução) (Síntese localizada do trecho vinte e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Two “viewports” are in play, and it’s worth keeping them straight: » (Tradução) (Síntese localizada do trecho vinte e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- 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. » (Tradução) (Síntese localizada do trecho vinte e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

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

» (Tradução) (Síntese localizada do trecho trinta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## The correct tag, and where it goes » (Tradução) (Síntese localizada do trecho trinta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

<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 Lighthouse 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. » (Tradução) (Síntese localizada do trecho trinta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Attribute reference » (Tradução) (Síntese localizada do trecho trinta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«The content attribute is a comma-separated list of directives. MDN is the canonical attribute-by-attribute reference; here’s what each one does: » (Tradução) (Síntese localizada do trecho trinta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«| 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). | » (Tradução) (Síntese localizada do trecho trinta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho trinta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho trinta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Never disable zoom: user-scalable=no is an anti-pattern » (Tradução) (Síntese localizada do trecho trinta e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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: » (Tradução) (Síntese localizada do trecho quarenta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«1. 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. 2. 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 » (Tradução) (Síntese localizada do trecho quarenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.) « ignores it” as proof the markup is accessible everywhere.

» (Tradução) (Síntese localizada do trecho quarenta e um, parte dois: o texto-fonte foi preservado para conferência na revisão nativa.)

«The rule is simple: don’t touch zoom. width=device-width, initial-scale=1 and nothing else. » (Tradução) (Síntese localizada do trecho quarenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Is it a ranking factor? » (Tradução) (Síntese localizada do trecho quarenta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho quarenta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 rendering guarantee, or as proof a page’s responsive design is actually good.

» (Tradução) (Síntese localizada do trecho quarenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 experience. 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. » (Tradução) (Síntese localizada do trecho quarenta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 indexing too: that’s a distinct Google Search concept about which version of your page Google primarily uses for indexing and ranking; the viewport tag is about how that mobile HTML renders in a browser, full stop.

» (Tradução) (Síntese localizada do trecho quarenta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## How to test it — the tooling changed in 2023 » (Tradução) (Síntese localizada do trecho quarenta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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, 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. » (Tradução) (Síntese localizada do trecho quarenta e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cinquenta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Your current toolkit: » (Tradução) (Síntese localizada do trecho cinquenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- 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 Insights — runs Lighthouse plus field Core Web Vitals 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. » (Tradução) (Síntese localizada do trecho cinquenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Common mistakes » (Tradução) (Síntese localizada do trecho cinquenta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- 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. » (Tradução) (Síntese localizada do trecho cinquenta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«For where this sits in the broader mobile work — configuration, content parity, speed — see the mobile SEO hub, the mobile SEO checklist, and mobile-first indexing. For the tag itself as part of the wider on-page tag family, the meta tags cluster is the map. » (Tradução) (Síntese localizada do trecho cinquenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## AI summary » (Tradução) (Síntese localizada do trecho cinquenta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«A condensed take on the Advanced version: » (Tradução) (Síntese localizada do trecho cinquenta e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- The viewport meta tag — <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 WCAG’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 » (Tradução) (Síntese localizada do trecho sessenta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.) « 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 indexing (which version is indexed, not how it renders).
• Testing changed: Search Console’s Mobile Usability report, the Mobile-Friendly Test tool, and its API were retired Dec 1, 2023 — use Lighthouse, PageSpeed Insights, 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. » (Tradução) (Síntese localizada do trecho sessenta, parte dois: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Official documentation » (Tradução) (Síntese localizada do trecho sessenta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Primary-source documentation and standards references. » (Tradução) (Síntese localizada do trecho sessenta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 report and Mobile-Friendly Test tool/API, pointing to Lighthouse. » (Tradução) (Síntese localizada do trecho sessenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 WCAG 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. » (Tradução) (Síntese localizada do trecho sessenta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Bing / Microsoft

• Bing’s Mobile Friendliness Test Tool (in Bing Webmaster Tools) 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 Tools help center for the live page.) » (Tradução) (Síntese localizada do trecho sessenta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Quotes from the source » (Tradução) (Síntese localizada do trecho setenta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho setenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Google — what the tag does and why » (Tradução) (Síntese localizada do trecho setenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- “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. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” — Lighthouse / Chrome for Developers (Google). Jump to quote

• “Presence of this tag indicates to Google that the page is mobile friendly.” — Meta tags and attributes that Google supports, Google Search Central docs. Read the doc » (Tradução) (Síntese localizada do trecho setenta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«MDN — the accessibility warning » (Tradução) (Síntese localizada do trecho setenta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- “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 » (Tradução) (Síntese localizada do trecho setenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«W3C — the accessibility conformance test for zoom » (Tradução) (Síntese localizada do trecho setenta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- 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 » (Tradução) (Síntese localizada do trecho setenta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«MDN — qualifying the legacy fallback and breakpoint behavior » (Tradução) (Síntese localizada do trecho setenta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- “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 design with breakpoints and media queries may not work as intended on mobile browsers.” — MDN, Responsive design guide. Read the reference » (Tradução) (Síntese localizada do trecho setenta e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Google — retiring the mobile tools (Dec 2023) (via Search Engine Land’s verbatim coverage) » (Tradução) (Síntese localizada do trecho oitenta, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” Read the coverage » (Tradução) (Síntese localizada do trecho oitenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho oitenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Which viewport configuration should I use? » (Tradução) (Síntese localizada do trecho oitenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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). » (Tradução) (Síntese localizada do trecho oitenta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Viewport tag checklist » (Tradução) (Síntese localizada do trecho noventa, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«A quick pass to confirm the tag is present and sane: » (Tradução) (Síntese localizada do trecho noventa e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- [ ] A <meta name="viewport"> tag exists in the <head> (view source or check your template/theme head partial).

• It’s placed high in the <head>, near charset, before content-dependent tags.
• The content value is width=device-width, initial-scale=1.
• width is device-width — not a hardcoded pixel number like 1024.
• initial-scale is 1 — not below 1 (avoids double-tap-zoom delay).
• No user-scalable=no and no restrictive maximum-scale (zoom stays enabled — accessibility).
• Verified with Lighthouse or PageSpeed Insights (not the retired Mobile-Friendly Test / Mobile Usability report).
• Spot-checked on a real phone or in the Chrome DevTools device toolbar — text is readable, no horizontal scroll.
• Your responsive CSS breakpoints actually apply at phone widths (they may not without a correct viewport tag).
• Zoomed to 200% and the layout still works without content getting clipped.
• Spot-checked in more than one browser/engine, not just your default — an iOS-only check can hide a zoom restriction that other browsers still enforce. » (Tradução) (Síntese localizada do trecho noventa e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Viewport meta tag — cheat sheet » (Tradução) (Síntese localizada do trecho noventa e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«The one line you want » (Tradução) (Síntese localizada do trecho noventa e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

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

«Google, Bing, and Lighthouse all recommend this exact value. » (Tradução) (Síntese localizada do trecho noventa e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Attribute reference » (Tradução) (Síntese localizada do trecho noventa e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«| 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 accessibility rule; iOS 10+ overrides it. | | interactive-widget | (optional) | resizes-visual (default) / resizes-content / overlays-content. | » (Tradução) (Síntese localizada do trecho cem, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Test with: Lighthouse · PageSpeed Insights · Chrome DevTools device toolbar · Bing Mobile Friendliness Test. Not the Mobile-Friendly Test or Search Console Mobile Usability report — both retired Dec 1, 2023. » (Tradução) (Síntese localizada do trecho cento e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Viewport anti-patterns » (Tradução) (Síntese localizada do trecho cento e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«The four ways people get this tag wrong, and what to do instead. » (Tradução) (Síntese localizada do trecho cento e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 accessibility 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. » (Tradução) (Síntese localizada do trecho cento e nove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e dez, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e onze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«4. Relying on the retired GSC Mobile Usability report 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 Usability,” it’s silently doing nothing. Fix: audit with Lighthouse / PageSpeed Insights instead. » (Tradução) (Síntese localizada do trecho cento e doze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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 experience. Set it once, correctly, and move on. » (Tradução) (Síntese localizada do trecho cento e treze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Check and audit your viewport tag » (Tradução) (Síntese localizada do trecho cento e dezesseis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Ways to verify the tag across a page or a whole site, from a quick console snippet to a crawl. » (Tradução) (Síntese localizada do trecho cento e dezessete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«DevTools console — inspect the current page’s viewport tag » (Tradução) (Síntese localizada do trecho cento e dezoito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

// 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 » (Tradução) (Síntese localizada do trecho cento e dezenove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

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 » (Tradução) (Síntese localizada do trecho cento e vinte, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

# 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 » (Tradução) (Síntese localizada do trecho cento e vinte e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

# 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) » (Tradução) (Síntese localizada do trecho cento e vinte e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

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

«To flag the anti-pattern specifically, search for: » (Tradução) (Síntese localizada do trecho cento e vinte e dois, parte dois: o texto-fonte foi preservado para conferência na revisão nativa.)

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

«For a whole-site sweep, a crawler (Screaming Frog, Ahrefs Site Audit) is faster than scripting — see the Ferramentas tab. » (Tradução) (Síntese localizada do trecho cento e vinte e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Tools for checking the viewport tag » (Tradução) (Síntese localizada do trecho cento e vinte e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«- Lighthouse (Chrome DevTools → Lighthouse, or the CLI) — the direct replacement for the retired Mobile-Friendly Test; runs the viewport audit (“Optimize viewport for mobile” in Lighthouse 13+) plus the rest of mobile usability and performance.

• PageSpeed Insights — Lighthouse in the browser, with field Core Web Vitals 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 Tools) — checks viewport and zoom-control configuration and recommends the same tag.
• Screaming Frog SEO Spider / 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? » (Tradução) (Síntese localizada do trecho cento e vinte e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Note the retirements: Search Console’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. » (Tradução) (Síntese localizada do trecho cento e vinte e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## The viewport tag is present but the page still looks desktop-sized » (Tradução) (Síntese localizada do trecho cento e trinta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e trinta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Mobile layout works at first and then jumps wider » (Tradução) (Síntese localizada do trecho cento e trinta e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Symptom: the initial layout fits, then horizontal scrolling appears after load. Likely cause: JavaScript adds a fixed-width widget, table, banner, or iframe 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. » (Tradução) (Síntese localizada do trecho cento e trinta e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Pinch zoom is blocked » (Tradução) (Síntese localizada do trecho cento e trinta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«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. » (Tradução) (Síntese localizada do trecho cento e trinta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## A crawler reports the tag missing but the browser shows it » (Tradução) (Síntese localizada do trecho cento e trinta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Symptom: a rendered browser sees the tag, while a raw-HTML crawler does not. Likely cause: client-side JavaScript inserts it. Fix: emit the tag in the initial document head. A foundational rendering instruction should not depend on a script running successfully. » (Tradução) (Síntese localizada do trecho cento e trinta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Validate a viewport-tag change » (Tradução) (Síntese localizada do trecho cento e quarenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«| 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 Lighthouse 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 rendering path has inconsistent markup | After deployment and in scheduled template QA | Roll back the affected template if pages revert to the legacy desktop viewport | » (Tradução) (Síntese localizada do trecho cento e quarenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Resources worth your time » (Tradução) (Síntese localizada do trecho cento e quarenta e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«My related writing

• The Beginner’s Guide to Technical SEO — where mobile rendering and page experience 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. » (Tradução) (Síntese localizada do trecho cento e quarenta e seis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«My speaking

• How Search Works (SlideShare) — my walkthrough of crawling, rendering, indexing, and ranking, including how Googlebot crawls and renders as a smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”) » (Tradução) (Síntese localizada do trecho cento e quarenta e sete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«From around the industry

• <meta name="viewport"> (MDN Web Docs) — the precise attribute-by-attribute reference, iOS override behavior, and the WCAG 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 Lighthouse recommendation. » (Tradução) (Síntese localizada do trecho cento e quarenta e oito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.) «- 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. » (Tradução) (Síntese localizada do trecho cento e quarenta e oito, parte dois: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Test yourself: Viewport Meta Tag » (Tradução) (Síntese localizada do trecho cento e cinquenta e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Five quick questions on the viewport meta tag. Pick an answer for each, then check. » (Tradução) (Síntese localizada do trecho cento e cinquenta e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

Registro de alterações