Viewport

Le terme "viewport" se réfère à la zone visible d'une page web sur l'écran de l'utilisateur. C'est la partie de la page qui est actuellement visible sans avoir à faire défiler la page. La taille et les dimensions du viewport varient selon l'appareil utilisé pour accéder au site web, comme un ordinateur de bureau, une tablette ou un smartphone. L'origine du concept de viewport dans le développement web est étroitement liée à l'évolution d'Internet et à l'essor des appareils mobiles.

Origine

Le viewport a été introduit par Apple pour son navigateur mobile Safari afin de gérer la mise en page sur les appareils mobiles. Cette invention faisait partie des efforts d'Apple pour améliorer l'expérience de navigation web sur les iPhones, lancés pour la première fois en 2007.

Avant l'introduction du viewport, les pages web étaient généralement conçues pour les moniteurs de bureau, et les navigateurs mobiles affichaient souvent ces pages comme des versions réduites, obligeant les utilisateurs à zoomer pour lire le contenu.

Ce concept a été rapidement adopté par d'autres navigateurs mobiles et est devenu une pratique standard dans le Responsive Web Design.

Note

Les navigateurs web appliquent un viewport par défaut si celui-ci n'est pas défini dans le code HTML. En général, ils utilisent une taille suffisamment grande pour afficher l'intégralité du site web, souvent avec un niveau de zoom réduit pour adapter les sites conçus pour des écrans plus larges, comme ceux des ordinateurs de bureau, aux écrans plus petits des appareils mobiles.

A gauche sans viewport, à droite avec viewport.

Balise meta viewport

La balise <meta> viewport est un élément HTML utilisé pour activer et contrôler le viewport. Cette balise permet aux développeurs web de spécifier comment une page web doit s'adapter aux différentes tailles d'écran, en particulier sur les appareils mobiles, pour assurer une expérience utilisateur optimale.

Emplacement : La balise est placée dans la section <head> du document HTML.

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

Attributs principaux

width : Cet attribut contrôle la largeur du viewport. Quand il est réglé sur device-width, la largeur du viewport correspond à la largeur de l'écran de l'appareil. Cela aide à s'assurer que le contenu est dimensionné correctement dès le départ.
initial-scale : Cet attribut définit le niveau de zoom initial de la page lorsqu'elle est chargée. Un initial-scale de 1 signifie qu'il n'y a pas de zoom lors du chargement de la page, ce qui est idéal pour une conception responsive.

Fonctionnement

Lorsque le navigateur charge la page, il examine la balise <meta> viewport et ajuste la mise en page en fonction de ses paramètres.
Si width est réglé sur device-width, le contenu de la page est dimensionné pour s'adapter à la largeur de l'écran, évitant ainsi aux utilisateurs de devoir zoomer pour lire ou interagir avec le contenu.
L'initial-scale de 1 garantit que la page s'affiche à une échelle appropriée pour l'appareil, améliorant l'expérience utilisateur sur les petits écrans.

➡️ MDN - Viewport meta tag

Unités de mesure

Dans le développement web, il existe plusieurs unités de mesure relatives au viewport, qui sont particulièrement utiles pour créer des designs responsive.

vw (Viewport Width)

100vw est égal à 100% de la largeur du viewport.
Cette unité est utilisée pour définir des tailles de manière proportionnelle à la largeur de la fenêtre d'affichage. Par exemple, si vous réglez la largeur d'un élément à 50vw, cet élément occupera toujours 50% de la largeur du viewport, peu importe la taille de la fenêtre.

vh (Viewport Height)

100vh est égal à 100% de la hauteur du viewport.
Semblable à vw, mais basé sur la hauteur du viewport. Si un élément a une hauteur de 50vh, il occupera 50% de la hauteur du viewport.

vmin (Viewport Minimum)

100vmin correspond à 100% de la dimension la plus petite du viewport, que ce soit la largeur ou la hauteur.
Utile pour s'assurer que le contenu reste visible et proportionnel dans des viewports où la hauteur et la largeur diffèrent considérablement. Par exemple, 10vmin utilisera 10% de la dimension la plus petite du viewport, soit la largeur ou la hauteur.

vmax (Viewport Maximum)

100vmax correspond à 100% de la dimension la plus grande du viewport.
Semblable à vmin, mais se base sur la dimension la plus grande du viewport. Cette unité est moins couramment utilisée que vmin.

Tip

L'utilisation de vh (viewport height) et vw (viewport width) plutôt que des pourcentages est une question de contexte et d'objectif de conception. Les unités vh et vw sont toujours une proportion de la taille du viewport (la fenêtre d'affichage du navigateur), indépendamment de tout élément parent. En revanche, les pourcentages sont relatifs à la taille de l'élément parent. Si vous définissez une largeur en pourcentage, elle sera calculée en fonction de la largeur de l'élément conteneur.