Ce que c'est
Les écrans de téléphone sont physiquement étroits, mais pendant longtemps la plupart des sites web ont été conçus en supposant un écran d'ordinateur bien plus large. Pour que ces anciens sites restent utilisables, les navigateurs mobiles font par défaut comme si l'écran mesurait environ 980 pixels de large — à peu près la taille d'un écran d'ordinateur — puis réduisent le tout pour que ça tienne, ce qui explique pourquoi une page non préparée peut sembler minuscule et dézoomée sur un téléphone jusqu'à ce qu'on pince l'écran pour zoomer.
La balise meta viewport est une seule ligne de code, <meta name="viewport" content="width=device-width, initial-scale=1">, qui remplace ce comportement par défaut dépassé et indique au navigateur "dimensionne réellement cette page à la largeur réelle de l'écran, à un zoom normal". C'est ce qui permet à un design responsive (qui s'adapte à différentes tailles d'écran) de vraiment fonctionner sur un téléphone.
Pourquoi c'est important
Sans cette balise, une page soigneusement conçue pour se réorganiser et se redimensionner sur mobile n'en a jamais l'occasion — le téléphone l'affiche comme une mise en page de bureau rétrécie, peu importe la qualité du design sous-jacent. C'est un réglage purement technique et tout-ou-rien : soit la balise est présente et correcte, soit chaque visiteur sur téléphone voit la mauvaise mise en page, quelle que soit la qualité du reste du site.
Comme plus de la moitié du trafic web de la plupart des sites vient des téléphones, cette seule ligne manquante peut affecter la majorité des visiteurs avant même qu'ils ne commencent à lire.
Comment le corriger
- Regarde le code source HTML de ta page et vérifie, dans la section
<head>, la présence d'une balise commençant par<meta name="viewport". - Si elle manque, ajoute
<meta name="viewport" content="width=device-width, initial-scale=1">directement dans la section<head>. - Si tu utilises un créateur de site (Squarespace, Wix, Webflow, WordPress), c'est réglé automatiquement par la plateforme — une balise manquante indique presque toujours un bloc de code personnalisé qui l'annule, donc vérifie le code personnalisé ajouté dans le
<head>. - Évite d'ajouter
maximum-scale=1ouuser-scalable=noà cette même balise — ces ajouts empêchent les visiteurs de zoomer en pinçant l'écran, ce qui crée un problème d'accessibilité distinct. - Charge ensuite la page sur un vrai téléphone (ou en mode aperçu mobile de ton navigateur) pour confirmer qu'elle remplit maintenant l'écran à une taille lisible, sans paraître dézoomée.