Sans balise Meta de fenêtre d'affichage, les appareils mobiles affichent les pages à la largeur d'écran habituelle, puis redimensionnent pages vers le bas, ce qui les rend difficiles à lire.
Définir la balise meta viewport vous permet de contrôler la largeur et l'échelle de la fenêtre d'affichage afin qu'elle soit correctement dimensionnée sur tous les appareils.
Échec de l'audit des balises Meta de la fenêtre d'affichage Lighthouse
Lighthouse signale les pages sans balise Meta viewport :
Une page échoue à l'audit si toutes les conditions suivantes ne sont pas remplies:
- L'élément <head> du document contient une balise <meta name="viewport">.
- La balise Meta de fenêtre d'affichage contient un attribut content.
- La valeur de l'attribut content inclut le texte width=.
Ajouter une balise Meta de fenêtre d'affichage
Ajoutez une balise <meta> de fenêtre d'affichage avec les paires clé-valeur appropriées à <head>.
de votre page:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Voici ce que fait chaque paire clé-valeur :
- width=device-width définit la largeur du viewport sur la largeur de l'appareil.
- initial-scale=1 définit le niveau de zoom initial lorsque l'utilisateur accède à la page.
Échelle initiale inférieure à 1
Lorsque initial-scale est défini sur une valeur inférieure à 1, il est possible que les navigateurs activent la fonctionnalité Appuyer deux fois pour zoomer, généralement utilisée pour les sites pour ordinateur qui ne sont pas optimisés pour les mobiles. Cela ajoute un délai de 300 millisecondes à toutes les interactions par tapotement, pendant que le navigateur attend de vérifier si un deuxième "double" tapotement se produit. Par conséquent, l'audit échoue également lorsque l'échelle initiale est définie sur moins de 1.