Viewport

Le viewport désigne la zone visible d'une page web à l'écran de l'utilisateur. C'est la portion du document actuellement affichée sans défilement. Sa taille varie selon le type d'appareil : ordinateur, tablette, smartphone, etc. Ce concept est devenu essentiel avec l'essor du Responsive Web Design.

Origine

Le concept de viewport a été introduit par Apple avec le navigateur mobile Safari, afin d'améliorer l'affichage des sites sur les premiers iPhones (2007).

Avant cela, les navigateurs mobiles affichaient les sites web conçus pour ordinateurs entièrement réduits, obligeant les utilisateurs à zoomer et faire défiler pour lire le contenu.

Le viewport a donc permis d'adapter la mise en page aux petits écrans, puis a été adopté par tous les navigateurs mobiles comme standard du web responsive.

Note

Si le code HTML ne définit aucune balise viewport, le navigateur applique un viewport par défaut. Dans ce cas, la page est affichée avec une largeur artificiellement large (souvent 980 px), puis réduite à l'écran, ce qui oblige l'utilisateur à zoomer pour lire le contenu.

A gauche sans viewport, à droite avec viewport, et dans les deux cas : pas de RWD.

Balise meta viewport

La balise <meta> viewport est un élément HTML utilisé pour contrôler la mise à l'échelle et l'adaptation du contenu à la taille de l'écran.

Elle se place dans la section <head> du document :

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

Attributs principaux

width : Définit la largeur du viewport. La valeur device-width indique que la largeur du viewport correspond à celle de l'écran du périphérique, garantissant un affichage fidèle.
initial-scale : Définit le niveau de zoom initial de la page. Une valeur de 1 indique qu'aucun zoom n'est appliqué, assurant un rendu naturel.

Fonctionnement

Lors du chargement :

Le navigateur lit la balise <meta name="viewport">.
Il ajuste la mise en page selon les paramètres spécifiés.
Si width=device-width, le contenu s'adapte immédiatement à la largeur de l'écran.
Si initial-scale=1, la page est affichée sans zoom ni déformation.

➡️ MDN - Viewport meta tag

Unités de mesure relatives au viewport

Les unités relatives au viewport permettent de définir des tailles proportionnelles à la fenêtre d'affichage plutôt qu'à un élément parent. Elles sont indispensables en conception responsive.

Unité	Signification	Exemple	Description
vw	Viewport Width	50vw	50 % de la largeur du viewport
vh	Viewport Height	50vh	50 % de la hauteur du viewport
vmin	Viewport Minimum	10vmin	10 % de la dimension la plus petite (largeur ou hauteur)
vmax	Viewport Maximum	10vmax	10 % de la dimension la plus grande (largeur ou hauteur)

➡️ MDN - Default viewport units

Tip

Les unités vh et vw sont toujours relatives au viewport (fenêtre du navigateur). En revanche, les pourcentages (%) sont relatifs à l'élément parent.

Utilisez vh/vw pour des mises en page indépendantes du parent, et % lorsque la taille doit suivre la structure du conteneur.