Utiliser des unités de viewport dynamiques

• Sur desktop, vw et vh représentent correctement la taille du viewport
• Sur mobile, la taille est affectée par des éléments d’interface générés dynamiquement comme la barre d’outils ou la barre d’adresse. Ainsi, 100vh peut dépasser la taille du viewport, ou s’adapter à celle-ci lorsque la barre d’adresse se rétracte lors du défilement
• Le groupe de travail CSS a fourni des unités qui peuvent être utilisées pour s’adapter à ces variations dynamiques de taille, afin d’obtenir des dimensions correspondant exactement au viewport réel
  • Large viewport : lvh correspond au cas où il n’y a pas d’interface générée dynamiquement
  • Small viewport : svh correspond au cas où une interface rétractée se redéploie
  • Dynamic viewport : dvh s’ajuste à la taille du viewport en fonction de l’état dynamique de l’interface ; pris en charge par Chrome 108, Firefox 101 et Safari 15.4