N'a pas de tag avec la largeur ou l'échelle initiale

De nombreux moteurs de recherche classent les pages en fonction de leur adaptation aux mobiles. Sans balise Meta de fenêtre d'affichage, les appareils mobiles affichent les pages à une largeur standard d'écran d'ordinateur, puis les réduisent, ce qui les rend difficiles à lire.

La balise Meta de la fenêtre d'affichage vous permet de contrôler la largeur et 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 signale les pages sans balise Meta de fenêtre d'affichage:

L'audit Lighthouse indique qu'il manque une fenêtre d'affichage sur une page

Une page échoue à l'audit, sauf si toutes les conditions suivantes sont remplies : - L'élément <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=.

Lighthouse ne vérifie pas que width est égal à device-width. Elle ne recherche pas non plus de paire clé-valeur initial-scale. Toutefois, vous devez tout de même inclure les deux pour que votre page s'affiche correctement sur les appareils mobiles.

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.

Ressources