Viewport
V
Definition complete
Le viewport est la zone visible d'une page web dans la fenetre du navigateur. C'est la partie du document actuellement affichee a l'ecran, excluant les barres d'outils du navigateur, les scrollbars et tout contenu necessitant un defilement pour etre vu.
La balise meta viewport, essentielle au responsive design, controle comment la page s'affiche sur mobile : <meta name="viewport" content="width=device-width, initial-scale=1">. Elle indique au navigateur d'adapter la largeur au device et de ne pas zoomer initialement.
En CSS, les unites viewport (vw, vh, vmin, vmax) permettent de dimensionner des elements relativement a la taille de la fenetre. CSS moderne ajoute dvh, svh, lvh pour gerer les barres d'adresse dynamiques sur mobile.
En JavaScript, window.innerWidth et window.innerHeight retournent les dimensions du viewport, tandis que visualViewport API offre des informations plus precises incluant le zoom pince.
Exemples pratiques
- Hero fullscreen :
height: 100vh;(ou100dvhpour mobile) cree une section occupant exactement la hauteur visible, effet "landing" impactant. - Typographie responsive :
font-size: clamp(1rem, 2.5vw, 2rem);taille de police s'adaptant fluidement a la largeur du viewport. - Sticky header : Barre de navigation fixee en haut du viewport avec
position: fixed; top: 0;, visible quel que soit le scroll.
A quoi sert Viewport ?
Le viewport sert a creer des layouts responsive s'adaptant a toutes les tailles d'ecran, dimensionner des elements proportionnellement a l'ecran, detecter et reagir aux changements de taille, et optimiser l'experience mobile.
Viewport en pratique chez 123web
Chez 123web, nous maitrisons les subtilites du viewport pour des sites parfaitement responsives. De l'iPhone SE au moniteur 4K, votre site s'adapte elegamment avec des unites viewport modernes et une meta viewport correctement configuree.