À quoi sert la viewport en développement web?

La fenêtre d'affichage (viewport) est la zone visible d'une page web dans le navigateur. Elle détermine la taille et l'échelle du contenu affiché à l'utilisateur. Sans elle, les pages pourraient ne pas s'afficher correctement sur différents appareils, des ordinateurs de bureau aux smartphones.

Sa fonction principale est d'adapter la mise en page de la page aux dimensions de l'écran de l'appareil. Avec la balise meta viewport, il est possible de contrôler la largeur et le zoom du contenu.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: Définit la largeur de la fenêtre d'affichage égale à la largeur de l'écran de l'appareil.
• initial-scale=1.0: Définit le niveau de zoom initial lors du chargement de la page. L'unité signifie pas de zoom (100%).

L'utilisation de viewport est étroitement liée aux technologies de conception adaptative, telles que les requêtes média CSS, qui permettent d'appliquer différents styles en fonction de la taille de la fenêtre de vue.