Définissez la balise meta viewport

Q: Quelle est la différence entre `initial-scale=1` et `width=device-width` ?

width=device-width règle la largeur du viewport pour correspondre à la largeur en pixels CSS de l'appareil (375 sur iPhone, 360 sur la plupart des Android). initial-scale=1 règle le niveau de zoom initial à 1,0. Les deux sont nécessaires — définissez-les ensemble.

Q: Dois-je inclure `viewport-fit=cover` pour les encoches d'iPhone ?

Seulement si vous utilisez env(safe-area-inset-*) en CSS pour pousser le contenu hors de l'encoche / dynamic island. Sinon la valeur par défaut convient.

Ce que vérifie ce contrôle

Cherche une balise <meta name="viewport"> dans le <head> de la page et vérifie qu’elle définit au moins width=device-width et un initial-scale. Le contrôle échoue lorsque la balise est totalement absente ou lorsqu’elle bloque le zoom (user-scalable=no, maximum-scale=1.0 — deux violations d’accessibilité).

Pourquoi c’est important

Sans balise viewport, les navigateurs mobiles supposent que la page est conçue pour le desktop et l’affichent sur 980 px de large, puis la dézooment pour l’adapter à l’écran. Le résultat est illisible : texte de 4 pixels, images surdimensionnées, aucun breakpoint responsive ne se déclenche parce que les calculs du viewport sont faux.

Indexation mobile-first de Google. Depuis 2021, Google utilise principalement le rendu mobile de votre page pour le classement. Un site qui échoue au contrôle viewport est considéré comme non adapté aux mobiles — une pénalité de classement en recherche mobile.
Core Web Vitals. LCP, CLS et INP sont tous mesurés sur mobile par défaut. Une page sans balise viewport déclenche un rendu en largeur desktop sur un écran de téléphone, ce qui gonfle le CLS et le LCP.
Expérience utilisateur. Le trafic mobile représente plus de 60 % pour la plupart des sites. La balise viewport est ce qui fait fonctionner le design responsive.

Comment le corriger

Placez ceci dans le <head>, avant tout CSS qui dépend de la largeur du viewport :

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

C’est la recette canonique — tous les frameworks, CMS et templates de démarrage modernes la livrent. Si votre site ne l’a pas, le template du <head> est incorrect.

Défauts courants par framework.

Astro — <ViewTransitions /> n’ajoute rien implicitement. Ajoutez la balise meta au <head> de votre layout de base.
Next.js — l’App Router exporte une constante viewport depuis app/layout.tsx :

import type { Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

WordPress — tout thème moderne émet la balise dans header.php. Si ce n’est pas le cas du vôtre, le thème date d’avant 2014.
Vue / Nuxt / Svelte — intégrée dans le index.html de démarrage.

Ne cassez pas l’accessibilité. Deux anti-patterns bloquent le pinch-to-zoom et violent WCAG 1.4.4 :

<!-- Mauvais — violation d'accessibilité -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Les deux empêchent les utilisateurs malvoyants de zoomer le texte. iOS 13+ ignore de toute façon user-scalable=no. N’ajoutez ni l’un ni l’autre.

Webviews d’applications natives. Si vous intégrez la page dans une WKWebView iOS ou une WebView Android avec ses propres contrôles de zoom, vous pouvez réserver le viewport au HTML spécifique à la webview — mais la version web publique a toujours besoin de la balise standard.

Vérifiez vous-même :

curl -s https://votredomaine.com/ | grep -o '<meta name="viewport"[^>]*>'

Attendez-vous à width=device-width, initial-scale=1. Si grep ne retourne rien, la balise est manquante.

Questions fréquentes

Quelle est la différence entre `initial-scale=1` et `width=device-width` ?

width=device-width règle la largeur du viewport pour correspondre à la largeur en pixels CSS de l’appareil (375 sur iPhone, 360 sur la plupart des Android). initial-scale=1 règle le niveau de zoom initial à 1,0. Les deux sont nécessaires — définissez-les ensemble.

Dois-je inclure `viewport-fit=cover` pour les encoches d’iPhone ?

Seulement si vous utilisez env(safe-area-inset-*) en CSS pour pousser le contenu hors de l’encoche / dynamic island. Sinon la valeur par défaut convient.

La balise affecte-t-elle les navigateurs desktop ?

Les navigateurs desktop ignorent entièrement la balise meta viewport — ils affichent toujours à la largeur réelle de la fenêtre. La balise concerne uniquement les mobiles.