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 (RWD).

Origine

La notion de viewport existe depuis CSS 2 (1998). Apple a ensuite introduit la balise meta viewport avec le navigateur Safari du premier iPhone (2007).

Les sites de l'époque étaient conçus pour ordinateur. Safari les affichait réduits pour les faire tenir dans l'écran, ce qui obligeait les utilisateurs à zoomer et à faire défiler la page pour lire le contenu. La balise meta viewport permet à un site adapté au mobile de demander à être affiché à la largeur réelle de l'écran.

Cette balise a ensuite été reprise par tous les navigateurs mobiles et est devenue un standard de fait du web responsive. Le W3C la décrit dans une spécification encore à l'état de brouillon (CSS Viewport Module Level 1).

Sources :

Note

Si la page ne contient pas de balise meta viewport, le navigateur applique un viewport par défaut. Dans ce cas, le navigateur met en page le site comme sur un écran d'ordinateur (souvent 980 px de large), puis le réduit pour le faire tenir dans l'écran : le texte devient minuscule et l'utilisateur doit zoomer pour le lire.

Source : MDN Web Docs - Responsive web design (The viewport meta tag)

La même page, sans responsive design (RWD), affichée sur un iPhone. A gauche, sans balise meta viewport : la page est mise en page comme sur un ordinateur, puis réduite (tout est visible, mais le texte est minuscule). A droite, avec la balise meta viewport : le texte a une taille normale, mais la mise en page, prévue pour un ordinateur, dépasse de l'écran.

La balise meta viewport est nécessaire, mais pas suffisante : la page doit aussi avoir un CSS responsive (media queries, unités relatives).

Balise meta viewport

La balise meta viewport est un élément HTML qui indique au navigateur quelle largeur utiliser pour mettre en page le contenu et quel zoom appliquer à l'ouverture de la page.

Elle se place dans la section <head> du document (voir Structure d'une page HTML) :

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>…</title>
</head>

L'attribut name indique le type d'information (viewport) et l'attribut content sa valeur : une liste de paramètres séparés par des virgules.

Paramètres principaux de l'attribut content

width : Définit la largeur du viewport. La valeur device-width correspond à la largeur de l'écran de l'appareil, exprimée en pixels CSS (et non en pixels physiques, voir Pixel CSS).
initial-scale : Définit le zoom appliqué à l'ouverture de la page. La valeur 1 correspond à un affichage à 100 %, sans zoom.

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, la largeur du viewport correspond à celle de l'écran : les media queries et les largeurs relatives peuvent alors s'appliquer.
Si initial-scale=1, la page s'affiche à 100 %, sans zoom.

Recommandation

Ne pas ajouter le paramètre user-scalable=no : il empêche l'utilisateur de zoomer, ce qui rend la page difficile à lire pour les personnes malvoyantes.

Source : MDN Web Docs - <meta name="viewport"> HTML attribute value

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 utiles en conception responsive. Les unités vw et vh ont déjà été présentées en A08 (voir Unités de mesure en CSS), vmin et vmax les complètent.

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)

Source : MDN Web Docs - <length> CSS type (Default viewport units)

Note

Sur smartphone, la barre d'adresse du navigateur apparaît et disparaît pendant le défilement. 100vh correspond à la hauteur du viewport quand cette barre est masquée : un bloc de hauteur 100vh peut donc être en partie caché quand elle s'affiche. Les unités svh (petit viewport, barre affichée) et dvh (viewport dynamique, qui suit la barre) évitent ce problème. Elles sont prises en charge par tous les navigateurs courants depuis 2022.

Sources :

Tip

Les unités vw, vh, vmin et vmax sont toujours relatives au viewport (zone d'affichage de la fenêtre, sans les barres 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.