Langues

Guide : Viewport Meta Tag

Ce que the viewport meta tag fait, pourquoi it rend responsive design fonctionner on mobile, the correct configuration, the attribute référence, and Erreurs fréquentes.

Première publication : 2 juil. 2026 · Dernière mise à jour : 3 août 2026 · Advanced
Langues
AIRédigé parAI v2

The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints to le navigateur to size the layout viewport to the device's width in CSS pixels au lieu de a legacy ~980px fallback some mobile navigateurs utiliser. Sans it, phones peut render lune page at que wider fallback and shrink it, producing tiny text, horizontal scroll, and responsive breakpoints que may pas appliquer as intended. It's pas a ranking factor itself, but its presence is un of the choses Google documents as indicating mobile-friendliness, and its absence is a classic ergonomie mobile échec. Jamais force user-scalable=aucun or a restrictive maximum-scale — it fails the W3C's accessibility conformance rule pour zoom and peut lock out low-vision utilisateurs, though navigateurs peut override it (iOS 10+ ignores it by par défaut). Tester it with Lighthouse or PageSpeed Insights: Search Console's Ergonomie mobile report and the Mobile-Friendly Tester were retired December 1, 2023.

TL;DR — The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints le navigateur to size the layout viewport to the device’s width in CSS pixels au lieu de a legacy ~980px fallback some mobile navigateurs utiliser, qui is ce que lets responsive CSS media requêtes evaluate contre the device’s réel width on mobile. Manquant or misconfigured, it’s a classic ergonomie mobile échec (tiny text, horizontal scroll). It is pas a ranking factor — Google documents its presence as un chose its mobile-friendliness evaluation checks pour, and aucun plus que que. Jamais force user-scalable=no / restrictive maximum-scale: it fails the W3C’s ACT accessibility rule pour zoom, though navigateur overrides exist (iOS 10+ ignores it by par défaut). Google and Bing recommend the identical tag. Tester with Lighthouse / PageSpeed Insights — Search Console’s Ergonomie mobile report and the Mobile-Friendly Tester were retired December 1, 2023.

Evidence for this claim The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Scope: Browser viewport behavior. Confidence: high · Verified: MDN: Viewport meta tag Evidence for this claim Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Scope: WCAG resize-text requirement and viewport guidance. Confidence: high · Verified: W3C WAI: Understanding Resize Text

The problem it solves: the ~980px virtual viewport

To comprendre the tag vous have to comprendre ce que it’s overriding. Quand mobile navigateurs were nouveau, the lack of a viewport tag meant some of les voudrait fall back to a fixed layout width of roughly 980px and render at que size — a deliberate accommodation so desktop-sized, pre-responsive sites wouldn’t complètement break on early smartphones. Le navigateur alors scaled le résultat bas to the physical screen. MDN’s propre framing: “Si le site isn’t designed to fonctionner bien on petit viewports and ce tag is omitted, some mobile navigateurs render le site en utilisant a fixed initial containing block width, typically 980px.” — it’s a browser-specific fallback, pas a universal spec constant.

The consequence, in Google’s propre words: “Sans a viewport meta tag, mobile devices render pages at typical desktop screen widths and alors scale lune pages bas, making les difficult to lire.” Vous obtenir unreadable text, forced pinch-zooming, and horizontal scrolling — the textbook symptoms of une page flagged “not mobile-friendly.”

Setting the tag “lets vous contrôler the width and scaling of the viewport so que it’s sized correctement on tout devices.”

Layout viewport vs. visual viewport (sous the hood)

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

  • The layout viewport is the area lune page lays out into and que fixed-position elements attach to. width=device-width sets ce to the device’s screen width in CSS pixels.
  • The visual viewport is ce que the utilisateur is currently looking at — qui changements quand ils pinch-zoom. Zooming changements the visual viewport sans modification the layout viewport.

The raison ce matters pour le SEO and CSS: votre responsive media requêtes (@media (max-width: 600px) and friends) are evaluated contre the layout viewport. Si the layout viewport is stuck at a legacy ~980px fallback parce que there’s aucun viewport tag, a phone may match votre desktop breakpoints au lieu de votre narrow ones. MDN puts it plainly: “Sans it, votre responsive design with breakpoints and media requêtes may pas fonctionner as intended on mobile navigateurs.” The tag is ce que rend device-width the layout viewport so votre intended breakpoints evaluate correctement.

Evidence for this claim Without an appropriate viewport hint, narrow responsive breakpoints may not match as intended against the wider virtual layout viewport; it is too absolute to say CSS media queries never fire. Scope: production HTML and HTTP responses Confidence: high · Verified: Responsive web design

The correct tag, and où 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 élevé in the <head>, near charset, avant content-dependent tags. Ce is the valeur Google, Bing, and Lighthouse tout recommend — verbatim, it’s the fix Lighthouse itself suggests. Don’t overthink the valeur: width=device-width, initial-scale=1 is the réponse pour essentially every responsive site.

Attribute référence

The content attribute is a comma-separated liste of directives. MDN is the canonical attribute-by-attribute référence; here’s ce que chaque un fait:

DirectiveCe que it faitNotes
widthContrôle the (minimum) pixel width of the viewportA whole number 1–10000, or the special valeur device-width (the screen width in CSS pixels). Utiliser device-width.
initial-scaleThe zoom ratio entre device width and viewport on chargerA number 0.0–10.0. Utiliser 1.
minimum-scaleThe minimum zoom level allowedDoit be ≤ maximum-scale. iOS 10+ ignores it by par défaut.
maximum-scaleThe maximum zoom-in allowedDoit be ≥ minimum-scale. iOS 10+ ignores it by par défaut. Don’t restrict it.
user-scalableSi the utilisateur peut zoom (yes/no, par défaut yes)iOS 10+ ignores it by par défaut. Setting no is an accessibility anti-pattern — leave it.
interactive-widgetHow interactive UI (e.g. virtual keyboards) affecter the viewportValeurs: resizes-visual (par défaut), resizes-content, overlays-content. Newer; la plupart SEO content omits it.
viewport-fitHow the viewport handles afficher cutouts (notches)Valeurs: auto (par défaut), contain (fits à l’intérieur the largest rectangle que avoids the cutout), cover (fills the afficher — pair with CSS env() safe-area-inset variables so content doesn’t land sous the cutout).

viewport-fit and interactive-widget are les deux browser-layout edge cas — display-cutout and virtual-keyboard handling, respectively — pas SEO directives; la plupart SEO-focused guides skip les entirely.

A petit but réel gotcha from Lighthouse’s propre docs: setting initial-scale ci-dessous 1 peut trigger a legacy double-tap-to-zoom behavior que adds interaction delay — un autre raison to stick with initial-scale=1 plutôt que getting clever.

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

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

  1. It fails the web’s propre accessibility conformance tester pour zoom, and it fonctionne contre WCAG’s intent. The W3C’s ACT rule “Meta viewport allows for zoom” (rule b4f0c3) s’applique to quelconque viewport tag que sets user-scalable or maximum-scale, and its expectation is explicit: the tag doit pas définir user-scalable=no, and maximum-scale doit pas be définir ci-dessous 2. (The rule carries stated assumptions — it doesn’t appliquer si lune page has aucun visible content, offers un autre façon to resize text, or jamais nécessite to reflow past a 320×256 CSS-pixel area — but a typical responsive page doesn’t meet ceux exceptions.) Per MDN: “Disabling zooming capabilities by setting user-scalable to a valeur of no empêche personnes experiencing low vision conditions from being able to lire and comprendre page content. Additionally, WCAG exige a minimum of 2× scaling; cependant, the meilleur pratique is to enable a 5× zoom.” Blocking zoom locks out the exact utilisateurs who besoin it la plupart.
  2. It’s aussi browser-specific, pas universal. iOS Safari 10 and plus tard ignore user-scalable=no and restrictive maximum-scale by par défaut — that’s an iOS override, pas a modifier to the ACT rule or to WCAG’s intent. So on a grand share of mobile trafic the setting accomplishes nothing, pendant que on navigateurs que do encore honor it (older Android WebViews, some in-app navigateurs) it actively fails the accessibility tester ci-dessus. Zero upside, réel downside — and don’t treat “iOS ignores it” as proof the markup is accessible everywhere.
Evidence for this claim `user-scalable=no` and `maximum-scale` below 2 fail the cited ACT rule's expectation under its assumptions, and disabling zoom harms low-vision users; an automated ACT failure is not by itself a complete universal WCAG conformance determination. Scope: production HTML and HTTP responses Confidence: high · Verified: Viewport meta tag

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

Is it a ranking factor?

Be precise ici, parce que a lot of SEO content overstates it. Here’s exactly ce que Google documents, and où the line to industry inference sits.

Ce que Google documents: the viewport tag is pas a direct ranking factor. Google’s propre supported-meta-tags doc dit plainly que “presence of ce tag indicates to Google que lune 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 une page’s responsive design is en réalité bon.

Evidence for this claim Google documents that viewport-meta presence indicates a page is mobile friendly, but that statement does not establish that the tag itself is a ranking factor, a display guarantee or sufficient evidence of responsive quality. Scope: production HTML and HTTP responses Confidence: high · Verified: Meta tags and attributes that Google supports

Où practitioners connecter the dots (industry inference, pas a Google citation): a manquant or misconfigured viewport tag is a courant root causer of the mobile-usability échecs (tiny text, horizontal scroll, unusable tap targets) que SEOs généralement comprendre to degrade mobile page experience. Que connection is reasonable and widely held in the industry, but it’s a practitioner inference à propos de pourquoi the tag matters — pas something Google’s docs state as a ranking chain.

So the honest framing: the tag itself isn’t scored, and fix it parce que une page sans it renders badly on phones — pas parce que Google documents it as a ranking lever, direct or indirect. Garder ce separate from indexation mobile-first aussi: that’s a distinct Recherche Google concept à propos de qui version of votre page Google primarily uses pour indexation and ranking; the viewport tag is à propos de how que mobile HTML renders in a navigateur, complet arrêter.

Evidence for this claim Mobile-first indexing means Google primarily uses the mobile content for indexing and ranking; it is a separate Google Search concept from the browser's viewport rendering contract. Scope: production HTML and HTTP responses Confidence: high · Verified: Mobile-first indexing best practices

Comment tester it — the tooling modifié in 2023

Ce is où la plupart older guides are stale. On December 1, 2023, Google retired Search Console’s Ergonomie mobile report, the Mobile-Friendly Tester outil, and the Mobile-Friendly Tester API (announced April 2023, confirmed complet que December). Google’s reasoning was que autre outils had matured — “nombreux autre robust resources pour evaluating ergonomie mobile have emerged, notamment Lighthouse from Chrome.” So si a tutorial indique vous to ouvrir Search Console → Ergonomie mobile to vérifier votre viewport, que report ne … plus exists.

Couche ces checks plutôt que relying on un outil: confirmer the tag exists in the raw served HTML (pas simplement après JavaScript runs), confirmer votre responsive breakpoints en réalité appliquer at phone widths, tester zooming to 200% sans the layout breaking (the resize behavior WCAG’s intent is construit autour), and spot-check in plus que un navigateur — an iOS Safari-only vérifier peut hide a zoom-restriction bug que Android or in-app navigateurs encore enforce.

Votre current toolkit:

  • Lighthouse (in Chrome DevTools). The relevant audit historically lire “Fait pas have a <meta name="viewport"> tag with width or initial-scale” — it fails unless the <head> has a meta name="viewport" whose content inclut width=. As of Lighthouse 13 it’s folded into the “Optimize viewport for mobile” insight.
  • PageSpeed Insights — runs Lighthouse plus field Core Web Vitals données.
  • Chrome DevTools device toolbar — emulate phone dimensions and eyeball it.
  • Bing’s Mobile Friendliness Tester Outil — Bing checks viewport and zoom-control configuration aussi, and recommends the même tag Google fait.
  • View source / real-device vérifier — parfois the fastest tester is to simplement regarder at the <head> on votre phone.

Erreurs fréquentes

  • Aucun tag at tout (“viewport not set”) — lune page renders at the legacy desktop-ish width and shrinks.
  • A hardcoded pixel width comme width=1024 au lieu de device-width — a tag exists, but it encore doesn’t match lune page to the device. Lighthouse and réel mobile-friendliness les deux vouloir a usable width= valeur, pas simplement quelconque tag.
  • initial-scale ci-dessous 1 — peut 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.

Pour où ce sits in the broader mobile fonctionner — configuration, content parity, speed — voir the mobile SEO hub, the mobile SEO checklist, and mobile-first indexation. Pour the tag itself as partie of the wider on-page tag family, the meta tags cluster is the map.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.