Adapter la page à l’écran d’un téléphone

Description

Ce critère vérifie que la page s’affiche correctement sur un téléphone. iPand la charge sur un Pixel 7 simulé, large de 412 px, et contrôle quatre points : la balise viewport déclare width=device-width sans bloquer le zoom, la page ne déborde pas en largeur, au moins 60 % du texte visible mesure 12 px ou plus, et la mise en page bouge peu pendant le chargement (CLS de 0,1 au plus).

Pourquoi c’est important pour les IA

Google indexe la version mobile de vos pages, explorée par son robot pour smartphone, et AI Overviews comme AI Mode s’appuient sur cet index. Google compte aussi l’affichage adapté au mobile parmi les éléments d’une bonne expérience de page, qu’il recommande pour ses fonctionnalités d’IA.

• Sans balise viewport, le téléphone affiche la page comme un écran d’ordinateur réduit : texte minuscule et zoom obligatoire.
• Bloquer le zoom (user-scalable=no) empêche les personnes malvoyantes de lire la page ; les règles d’accessibilité WCAG demandent un agrandissement d’au moins deux fois.
• Un contenu qui bouge pendant le chargement fait cliquer à côté : le CLS mesure ces décalages, et web.dev le juge bon à 0,1 au plus.

Comment corriger

1. 1 Déclarez la fenêtre d’affichage Placez dans l’en-tête de la page la balise <meta name="viewport" content="width=device-width, initial-scale=1">. N’y ajoutez ni user-scalable=no, ni maximum-scale inférieur à 2 : vos visiteurs doivent pouvoir zoomer. C’est le point qui pèse le plus dans le critère.
2. 2 Supprimez le débordement horizontal La page ne doit pas être plus large que l’écran, soit 412 px pour iPand. Cherchez les éléments à largeur fixe : images, tableaux, vidéos intégrées, blocs dimensionnés en pixels. Donnez aux images max-width: 100% et préférez des mises en page souples (Flexbox, Grid) aux largeurs fixes.
3. 3 Agrandissez le texte Au moins 60 % du texte visible doit mesurer 12 px ou plus. Gardez pour le corps du texte une taille proche de 16 px, la taille par défaut des navigateurs, et vérifiez les mentions, menus et pieds de page, souvent écrits trop petit.
4. 4 Réservez la place des images et des encarts Le CLS ne doit pas dépasser 0,1. Indiquez width et height sur les images et les vidéos, réservez la hauteur des bannières, publicités et widgets avant leur chargement, et n’insérez pas de contenu au-dessus de celui déjà affiché.

Pour aller plus loin

• Google — Bonnes pratiques pour l’indexation mobile first
• MDN — Valeur d’attribut HTML <meta name="viewport">
• web.dev — Les bases du responsive design
• web.dev — Cumulative Layout Shift (CLS)