Sans balise Meta de fenêtre d'affichage, les appareils mobiles affichent les pages à la largeur standard des écrans d'ordinateur, puis les réduisent, ce qui les rend difficiles à lire.
Définir la balise Meta de la fenêtre d'affichage vous permet de contrôler la largeur et la mise à l'échelle de la fenêtre d'affichage afin qu'elle s'adapte correctement à tous les appareils.
Échec de l'audit de la balise Meta de la fenêtre d'affichage Lighthouse
Lighthouse indique les pages sans balise Meta de fenêtre d'affichage:
Une page échoue à l'audit si toutes les conditions suivantes ne sont pas 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 visite la page.
Scaling initial inférieur à 1
Lorsque initial-scale est défini sur une valeur inférieure à 1, les navigateurs peuvent activer 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 aux interactions tactiles pendant que le navigateur attend de vérifier si un deuxième appui double se produit. Par conséquent, l'audit échoue également lorsque l'échelle initiale est définie sur une valeur inférieure à 1.