Sans balise meta viewport, les appareils mobiles affichent les pages à la largeur d'écran typique d'un ordinateur, puis les réduisent, ce qui les rend difficiles à lire.
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 de la balise Meta de fenêtre d'affichage Lighthouse
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 de la 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 au <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 de la fenêtre d'affichage 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
Si la valeur de initial-scale est inférieure à 1, les navigateurs peuvent activer la fonctionnalité de double-clic pour zoomer, généralement utilisée pour les sites pour ordinateur qui ne sont pas optimisés pour mobile. Cela ajoute un délai de 300 millisecondes à toute interaction tactile, pendant que le navigateur attend de voir si un deuxième appui (double-tap) se produit. L'audit échoue donc également lorsque l'échelle initiale est définie sur une valeur inférieure à 1.