La meta viewport c’est un élément ajouté au code HTML qui donne une instruction au navigateur pour contrôler les dimensions d’affichage d’une page web. Cet élément permet que la mise en page du contenu soit responsive, c'est-à-dire qu'elle s’adapte aux écrans des différents dispositifs des utilisateurs, principalement les dispositifs mobiles, tels que les portables et les tablettes par exemple.
Il est important d’avoir une meta viewport puisqu’aujourd’hui, la majorité des recherches de utilisateurs sont faites à partir d’un dispositif mobile. Quand une page web ne s’adapte pas à ces dispositifs, elle rend l’expérience utilisateur difficile ce qui pénalise son référencement.
La meta viewport doit être déclaré dans le code HTML au niveau du <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Afin que le contenu de la page s'adapte sur un écran mobile, il est nécessaire de définir la meta viewport avec les 2 instructions suivantes, sinon le navigateur n'effectuera pas la mise en page correctement :