Sans balise meta viewport, les appareils mobiles affichent les pages à la largeur d'écran d'ordinateur typique, puis les réduisent, 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.
Pourquoi l'audit de la balise Meta de fenêtre d'affichage Lighthouse échoue-t-il ?
Lighthouse signale les pages sans balise Meta viewport:
Une page échoue à l'audit, sauf si toutes les conditions suivantes sont remplies :
- Le <head> du document contient une balise <meta name="viewport">.
- La balise meta viewport 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 vue d'ensemble avec les paires clé-valeur appropriées à l'<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, les navigateurs peuvent activer la fonctionnalité de zoom par double pression, généralement utilisée pour les sites Web 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. L'audit échoue donc également lorsque la valeur de "initial-scale" est inférieure à 1.