Guide : Viewport Meta Tag

TL;DR — Le viewport meta balise est un line dans votre page’s <head> que indique phones et tablets à rendre votre page à le screen’s réel width au lieu de pretending c’est a desktop monitor. Sans il, votre page montre up tiny et vous ont à pinch et scroll sideways à lire il. Le line vous vouloir est <meta name="viewport" content="width=device-width, initial-scale=1">.

Ce que the viewport meta tag is

Quand smartphones premier obtenu web navigateurs, la plupart sites web étaient construit pour desktop screens. Donc nombreux phone navigateurs cheated: sans a viewport balise, ils’d fall back à a fixed ~980 pixel wide layout — desktop-ish — lay lune page out à que width, alors shrink le entier chose bas à fit le phone. Le résultat était a readable-shaped page que était façon aussi petit à en réalité lire, avec texte vous avait à pinch-zoom et contenu que spilled off le sides.

Le viewport meta balise turns que off. c’est a unique line vous put dans le <head> de votre page:

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

width=device-width indique le navigateur “lay ce page out à ce device’s screen width, mesuré dans CSS pixels” (pas necessarily le même as son raw hardware-pixel count on a élevé-density screen), et initial-scale=1 dit “et ne pas zoom dans or out quand lune page premier charge.” c’est il. Copy que line, paste il near le top de votre <head>, fait.

Pourquoi c’est important

Two raisons:

• Il rend votre page readable on a phone. Avec le balise, texte est legible sans zooming et contenu fits le screen. Sans il, vous obtenir le shrunk-down, tiny-texte, horizontal-scroll experience.
• c’est ce que rend “responsive design” en réalité fonctionner. Si votre site utilise modern responsive CSS (layouts que adapt à screen size), ceux règles sont meant à kick dans fondé on le navigateur’s réel screen width. Le viewport balise est ce que indique il que width. Sans il, votre responsive breakpoints peut pas appliquer le façon vous designed les pour mobile.

La plupart modern themes et site builders ajouter ce balise pour vous automatiquement. Mais older templates, hand-built pages, et some page builders miss il — qui est pourquoi “viewport pas définir” encore montre up dans audits.

The mistake to éviter

Vous pourrait voir a version de ce balise avec user-scalable=no on le fin — c’est quelqu’un trying à arrêter visitors depuis zooming donc ils ne peut pas “break” le layout. ne pas faire que. Il arrête personnes avec faible vision depuis zooming dans à lire votre page, et modern iPhones ignore le paramètre anyway, donc il ne fait pashing except hurt accessibility. Laisser zoom alone.

How ce fits the rest of mobile SEO

Le viewport balise est un petit piece de le bigger mobile picture — c’est à propos de comment votre page renders on a phone, qui est différent depuis indexation mobile-premier (à propos de qui version de votre page Google lit). Si vous êtes doing a complet mobile réussir, le mobile SEO hub, le mobile SEO liste de contrôle, et indexation mobile-premier cover le rest.

Vouloir le exact attribut référence, le accessibility details, et Comment tester le balise maintenant que Google’s old Mobile-Friendly Tester est gone? Switch à le Avancé tab.

«> 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. » (Traduction) (Résumé en français de la section vingt et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le problème il solves: le ~980px virtual viewport

À comprendre le balise vous ont à comprendre ce que c’est overriding. Quand mobile navigateurs étaient nouveau, le lack de a viewport balise meant some de les voudrait fall back à a fixed layout width de roughly 980px et rendre à que size — a deliberate accommodation donc desktop-sized, pre-responsive sites ne ferait pas complètement break on early smartphones. Le navigateur alors scaled le résultat bas à le physical screen. MDN’s propre framing: “Si le site n’est pas designed à fonctionner bien on petit viewports et ce balise est omitted, some mobile navigateurs rendre le site en utilisant a fixed initial containing bloquer width, typically 980px.” — c’est a navigateur-spécifique fallback, pas a universal spec constant.

Le consequence, dans Google’s propre words: “Sans a viewport meta balise, mobile devices rendre pages à typical desktop screen widths et alors scale lune pages bas, making les difficult à lire.” Vous obtenir unreadable texte, forced pinch-zooming, et horizontal scrolling — le textbook symptoms de une page flagged “not mobile-friendly.”

Paramètre le balise “lets vous contrôler le width et scaling de le viewport donc que c’est sized correctement on tout devices.”

Layout viewport vs. visual viewport (sous the hood)

Deux “viewports” sont dans play, et c’est worth keeping les straight:

• Le layout viewport est le area lune page lays out dans et que fixed-position elements attach à. width=device-width sets ce à le device’s screen width dans CSS pixels.
• Le visual viewport est ce que le utilisateur est currently looking à — qui changements quand ils pinch-zoom. Zooming changements le visual viewport sans modification le layout viewport.

Le raison ce matters pour le SEO et CSS: votre responsive media requêtes (@media (max-width: 600px) et friends) sont evaluated contre le layout viewport. Si le layout viewport est stuck à a legacy ~980px fallback parce que il y a aucun viewport balise, a phone peut match votre desktop breakpoints au lieu de votre narrow ones. MDN puts il plainly: “Sans il, votre responsive design avec breakpoints et media requêtes peut pas fonctionner as prévu on mobile navigateurs.” Le balise est ce que rend device-width le layout viewport donc votre prévu breakpoints evaluate correctement.

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 il élevé dans le <head>, near charset, avant contenu-dependent balises. Ce est le valeur Google, Bing, et Lighthouse tout recommend — verbatim, c’est le corriger Lighthouse itself suggests. ne pas overthink le valeur: width=device-width, initial-scale=1 est le réponse pour essentially chaque responsive site.

Attribute référence

Le content attribut est a comma-separated liste de directives. MDN est le canonical attribut-par-attribut référence; ici’s ce que chaque un fait:

«| 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). | » (Traduction) (Résumé en français de la section trente-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

A petit mais réel gotcha depuis Lighthouse’s propre docs: paramètre initial-scale ci-dessous 1 peut trigger a legacy double-tap-à-zoom behavior que ajoute interaction delay — un autre raison à stick avec initial-scale=1 plutôt que getting clever.

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

Vous’ll encore trouver user-scalable=no (or maximum-scale=1) copy-pasted dans old theme boilerplate, généralement depuis a developer qui n’a pas vouloir pinch-zoom “messing up” leur layout. c’est incorrect on deux counts:

«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 ignores it” as proof the markup is accessible everywhere.

» (Traduction) (Résumé en français de la section quarante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le règle est simple: ne pas touch zoom. width=device-width, initial-scale=1 et rien sinon.

Est il a facteur de classement?

Être precise ici, parce que a lot de SEO contenu overstates il. Ici’s exactly ce que Google documents, et où le line à 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 rendering guarantee, or as proof a page’s responsive design is actually good.

» (Traduction) (Résumé en français de la section quarante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Où practitioners connecter le dots (industry inference, pas a Google citation): a manquant or misconfigured viewport balise est a courant root causer de le mobile-usability échecs (tiny texte, horizontal scroll, unusable tap targets) que SEOs généralement comprendre à degrade mobile page experience. Que connection est reasonable et widely held dans le industry, mais c’est a practitioner inference à propos de pourquoi le balise matters — pas quelque chose Google’s docs state as a classement chain.

Donc le honest framing: le balise itself n’est pas scored, et corriger il parce que une page sans il renders badly on phones — pas parce que Google documents il as a classement lever, direct or indirect. Garder ce séparé depuis indexation mobile-premier aussi: c’est a distinct Recherche Google concept à propos de qui version de votre page Google primarily utilise pour indexation et classement; le viewport balise est à propos de comment que mobile HTML renders dans a navigateur, complet arrêter.

Comment tester it — the tooling modifié in 2023

Ce est où la plupart older guides sont stale. On December 1, 2023, Google retired Search Console’s Ergonomie mobile rapport, le Mobile-Friendly Tester outil, et le Mobile-Friendly Tester API (announced April 2023, confirmed complet que December). Google’s reasoning était que autre outils avait matured — “nombreux autre robust resources pour evaluating ergonomie mobile ont emerged, notamment Lighthouse depuis Chrome.” Donc si a tutorial indique vous à ouvrir Search Console → Ergonomie mobile à vérifier votre viewport, que rapport ne … plus exists.

Couche ces vérifications plutôt que relying on un outil: confirmer le balise exists dans le raw servi HTML (pas simplement après JavaScript exécute), confirmer votre responsive breakpoints en réalité appliquer à phone widths, tester zooming à 200% sans le layout breaking (le resize behavior WCAG’s intent est construit autour), et spot-vérifier dans plus que un navigateur — an iOS Safari-seulement vérifier peut hide a zoom-restriction bug que Android or dans-app navigateurs encore enforce.

Votre current toolkit:

• Lighthouse (dans Chrome DevTools). Le pertinent audit historically lire “Fait pas ont a <meta name="viewport"> balise avec width or initial-scale” — il fails unless le <head> a a meta name="viewport" whose content inclut width=. As de Lighthouse 13 c’est folded dans le “Optimize viewport pour mobile” insight.
• PageSpeed Insights — exécute Lighthouse plus champ Core Web Vitals données.
• Chrome DevTools device toolbar — emulate phone dimensions et eyeball il.
• Bing’s Mobile Friendliness Tester Outil — Bing vérifications viewport et zoom-contrôle configuration aussi, et recommends le même balise Google fait.
• View source / real-device vérifier — parfois le fastest tester est à simplement regarder à le <head> on votre phone.

Erreurs fréquentes

• Aucun balise à tout (“viewport not set”) — lune page renders à le legacy desktop-ish width et shrinks.
• A hardcoded pixel width comme width=1024 au lieu de device-width — a balise exists, mais il encore ne fait pas match lune page à le device. Lighthouse et réel mobile-friendliness les deux vouloir a usable width= valeur, pas simplement quelconque balise.
• initial-scale ci-dessous 1 — peut trigger le legacy double-tap-zoom delay.
• user-scalable=no / restrictive maximum-scale — copy-pasted depuis old boilerplate; accessibility anti-modèle, ignored on iOS anyway.

Pour où ce sits dans le broader mobile fonctionner — configuration, contenu parity, speed — voir le mobile SEO hub, le mobile SEO liste de contrôle, et mobile-premier indexation. Pour le balise itself as partie de le wider sur la page balise family, le meta balises cluster est le map.

AI summary

A condensed prendre on the Avancé version:

«- 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. » (Traduction) (Résumé en français de la section soixante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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.” » (Traduction) (Résumé en français de la section soixante, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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 indexing (which version is indexed, not how it renders). » (Traduction) (Résumé en français de la section soixante, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Common mistakes: no tag, hardcoded width=1024, initial-scale < 1, copy-pasted user-scalable=no. Google and Bing recommend the identical value. » (Traduction) (Résumé en français de la section soixante, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Official documentation » (Traduction) (Résumé en français de la section soixante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation and standards references. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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). » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- What the Viewport? — Chrome for Developers / web.dev on the legacy ~980px default and layout vs. visual viewport. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«Standards / technical reference » (Traduction) (Résumé en français de la section soixante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- <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. » (Traduction) (Résumé en français de la section soixante-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- MDN: Responsive design — the viewport meta tag — the plain statement that breakpoints and media queries “may not work as intended” without the tag. » (Traduction) (Résumé en français de la section soixante-six, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- MDN: CSS viewport concepts — qualifies the ~980px fallback to “some mobile browsers,” not a universal default. » (Traduction) (Résumé en français de la section soixante-six, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section soixante-six, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«Bing / Microsoft » (Traduction) (Résumé en français de la section soixante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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.) » (Traduction) (Résumé en français de la section soixante-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section soixante-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google’s documentation et MDN. Chaque lien jumps à le quoted passage on le page source où a deep lien est disponible.

Google — ce que le balise fait et pourquoi

«- “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 » (Traduction) (Résumé en français de la section soixante-treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 » (Traduction) (Résumé en français de la section soixante-treize, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

MDN — the accessibility 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 » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- On user-scalable, minimum-scale, and maximum-scale: “Browser settings can ignore this rule, and iOS10+ ignores it by default.” Read the reference » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

W3C — the accessibility conformance tester pour 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 » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

MDN — qualifying le legacy fallback et 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 » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “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 » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Google — retiring the mobile outils (Dec 2023) (via Moteur de recherche Land’s verbatim coverage)

• “Dans le nearly ten years since nous initially launched ce rapport, beaucoup autre robust resources pour evaluating mobile usability ont emerged, including Lighthouse depuis Chrome.” Lire le coverage

Qui viewport configuration devrait I utiliser?

Pour presque chaque site le réponse est le même un line — mais personnes talk themselves dans “clever” variants que causer problèmes. Click via à land on le correct valeur (et à règle out le anti-patterns).

Viewport tag checklist

A rapide réussir to confirmer the tag is présent and sane:

• A <meta name="viewport"> balise exists dans le <head> (view source or vérifier votre template/theme head partiel).
• c’est placed élevé dans le <head>, near charset, avant contenu-dependent balises.
• Le content valeur est width=device-width, initial-scale=1.
• width est device-width — pas a hardcoded pixel number comme 1024.
• initial-scale est 1 — pas ci-dessous 1 (avoids double-tap-zoom delay).
• Aucun user-scalable=no et aucun restrictive maximum-scale (zoom stays enabled — accessibility).
• Verified avec Lighthouse or PageSpeed Insights (pas le retired Mobile-Friendly Tester / Ergonomie mobile rapport).
• Spot-checked on a réel phone or dans le Chrome DevTools device toolbar — texte est readable, aucun horizontal scroll.
• Votre responsive CSS breakpoints en réalité appliquer à phone widths (ils peut pas sans a correct viewport balise).
• Zoomed à 200% et le layout encore fonctionne sans contenu getting clipped.
• Spot-checked dans plus que un navigateur/moteur, pas simplement votre par défaut — an iOS-seulement vérifier peut hide a zoom restriction que autre navigateurs encore enforce.

Viewport meta balise — cheat sheet

The un line vous vouloir

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

Google, Bing, and Lighthouse tout recommend ce exact valeur.

Attribute référence

Symptoms of a manquant/broken tag

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

Do / Don’t

• ✅ width=device-width, initial-scale=1, élevé in <head>.
• ❌ Hardcoded width=1024.
• ❌ initial-scale ci-dessous 1.
• ❌ user-scalable=no / maximum-scale=1.

Classement reality: pas a direct facteur de classement. Google documents seulement que son presence indicates mobile-friendliness — le usability→page-experience chain est industry inference, pas a Google-documented classement mechanism.

Tester avec: Lighthouse · PageSpeed Insights · Chrome DevTools device toolbar · Bing Mobile Friendliness Tester. Pas le Mobile-Friendly Tester or Search Console Ergonomie mobile rapport — les deux retired Dec 1, 2023.

Viewport anti-patterns

Le four façons personnes obtenir ce balise incorrect, et Que faire à la place.

«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. » (Traduction) (Résumé en français de la section cent neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

2. Hardcoding a pixel width (width=1024). A viewport tag exists, so audits parfois half-pass, but lune page is encore pinned to a fixed width que doesn’t match réel devices. Fix: utiliser width=device-width.

3. initial-scale ci-dessous 1 à “fit more on screen.” Shrinking le initial zoom peut trigger le legacy double-tap-à-zoom behavior que ajoute interaction delay, et il rend texte plus petit pour everyone. Corriger: initial-scale=1 et let votre responsive CSS handle layout.

4. Relying on le retired GSC Ergonomie mobile rapport à catch problèmes. Que rapport, le Mobile-Friendly Tester outil, et son API étaient retired December 1, 2023. Si votre QA traiter encore dit “check Mobile Usability,” c’est silently doing rien. Corriger: audit avec Lighthouse / PageSpeed Insights à la place.

Bonus — treating le balise as a classement lever. c’est pas un. Ajout il ne va pas lift rankings; il simplement rend lune page rendre correctement donc il peut réussir le mobile-friendliness vérifications que faire feed page experience. Définir il une fois, correctement, et déplacer on.

Vérifier and audit votre viewport tag

Façons à vérifier le balise à travers une page or a entier site, depuis a rapide console extrait à a explorer.

DevTools console — inspect le actuel page’s viewport balise

// 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 vérifier

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

Shell — récupérer une URL et grep le 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 que restrict zoom à travers a liste 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 le balise dans source (pour a code recherche / linter règle)

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

À flag le anti-modèle précisément, recherche pour:

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

Pour a whole-site sweep, a robot d’exploration (Screaming Frog, Ahrefs Site Audit) is faster que scripting — voir the Outils tab.

«## Tools for checking the viewport tag » (Traduction) (Résumé en français de la section cent vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- 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. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- PageSpeed Insights — Lighthouse in the browser, with field Core Web Vitals data alongside the lab audit. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Chrome DevTools device toolbar — toggle device emulation and eyeball the page at phone dimensions; the fastest way to see a broken viewport. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing Mobile Friendliness Test Tool (Bing Webmaster Tools) — checks viewport and zoom-control configuration and recommends the same tag. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- View source on your phone — the lowest-tech check: is the tag actually in the <head> of the served HTML? » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.)

«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. » (Traduction) (Résumé en français de la section cent vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

The viewport tag is présent but lune page encore semble desktop-sized

Symptom: source contient a viewport balise, yet phones montrer tiny texte or a wide layout. Probable causer: là sont duplicate viewport balises, le balise est injected aussi late, or le responsive CSS jamais charge. Corriger: garder un balise dans le serveur-rendu <head>, supprimer conflicting copies, et vérifier que le attendu media requêtes sont applied dans le rendu page.

Mobile layout fonctionne at premier and alors jumps wider

Symptom: le initial layout fits, alors horizontal scrolling apparaît après charger. Probable causer: JavaScript ajoute a fixed-width widget, tableau, banner, or iframe après le viewport est established. Corriger: inspect le rendu DOM à le moment overflow commence et constrain le injected element. Modification le viewport valeur ne peut pas repair an element que est intrinsically wider que le screen.

Pinch zoom is blocked

Symptom: utilisateurs ne peut pas zoom, même though lune page sinon fits. Probable causer: user-scalable=no or a restrictive maximum-scale remains dans le viewport contenu. Corriger: supprimer ceux restrictions et retest avec navigateur zoom et OS texte scaling. Ne faites pas treat an iOS override as proof que le markup est accessible everywhere.

A robot d’exploration reports the tag manquant but le navigateur montre it

Symptom: a rendu navigateur voit le balise, pendant que a raw-HTML robot d’exploration ne fait pas. Probable causer: client-side JavaScript inserts il. Corriger: emit le balise dans le initial document head. A foundational rendu instruction ne doit pas depend on a script running successfully.

Validate a viewport-tag modifier

Ressources utiles

Mon connexe writing

• Le Beginner’s Guide à SEO technique — où mobile rendu et page experience fit le bigger technique picture.
• Core Web Vitals: Ce que Ils Sont & Comment Améliorer Le vôtre — le performances side de le mobile experience que sits suivant à le viewport balise.

Mon speaking

• Comment Recherche Fonctionne (SlideShare) — mon walkthrough de exploration, rendu, indexation, et classement, notamment comment Googlebot explore et renders as a smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)

Depuis autour le industry

• <meta name="viewport"> (MDN Web Docs) — le precise attribut-par-attribut référence, iOS override behavior, et le WCAG accessibility warning.
• Ne fait pas ont a <meta name="viewport"> balise avec width or initial-scale (Lighthouse) (Chrome pour Developers) — le audit definition, le desktop-width-fallback explanation, et le recommended corriger.
• Ce que le Viewport? (Chrome pour Developers) — le legacy ~980px par défaut et layout vs. visual viewport, explained par Google.
• Meta balises et attributs que Google prend en charge (Recherche Google Central) — le actuel doc que noms le viewport balise as a mobile-friendliness signal.
• Google Officially Drops Ergonomie mobile Rapport, Mobile-Friendly Tester Outil et API (Moteur de recherche Land) — le December 2023 retirements et le Lighthouse recommendation.
• Vous pouvez arrêter en utilisant utilisateur-scalable=aucun et maximum-scale=1 dans viewport meta balises maintenant (Luke Plant) — background on pourquoi le restrictive zoom attributs existed et pourquoi ils sont obsolete et overridden on iOS.
• A Beginner’s Guide à Viewport Meta Balises (Semrush) — a well-rounded concurrent explainer covering interactive-widget, le iOS 10 override, et le WCAG warning.

Testez vos connaissances: Viewport Meta Tag

Five rapide questions on le viewport meta balise. Pick an réponse pour chaque, alors vérifier.

Journal des modifications