Qu'est-ce que Generateur d'unites de viewport dynamiques ?
Les unites de vue modernes CSS existent en trois variantes. La petite vue (svh) correspond a la hauteur de la fenetre moins l'interface du navigateur. La grande vue (lvh) correspond a la hauteur de la fenetre avec l'interface du navigateur retiree. La vue dynamique (dvh) s'ajuste lorsque l'interface du navigateur apparait et disparait. Ces unites sont utiles pour les mises en page plein ecran sur mobile, ou la barre d'adresse du navigateur modifie la zone visible.
Réponse rapide
Utilisez les unites de vue dynamiques (dvh, svh, lvh) pour les mises en page qui doivent remplir correctement la fenetre mobile lorsque l'interface du navigateur s'agrandit et se retracte. Incluez toujours une solution de repli vh classique pour les navigateurs plus anciens.
Last updated: 2026-06-11
Limites
- Les unites de vue dynamiques ne sont pertinentes que sur les navigateurs mobiles ou la barre d'adresse et d'autres elements d'interface s'agrandissent et se retractent. Sur desktop, dvh, svh et lvh se comportent identiquement a vh.
- Certains navigateurs mettent a jour dvh a la fin du defilement plutot qu'en continu, ce qui peut provoquer un saut visible de la hauteur de l'element lorsque la barre d'adresse se retracte.
- Sur les navigateurs mobiles, dvh change lorsque le clavier virtuel apparaît. Les champs de formulaire, de recherche et les interfaces de chat qui dependent de dvh pour les mises en page plein ecran peuvent se redimensionner de manière inattendue lorsque l'utilisateur commence a taper.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Choisissez le type d'unite : svh, lvh, dvh, svw, lvw ou dvw.
- Definissez une valeur en pourcentage pour l'unite de vue, comme 100 pour la hauteur complete.
- Choisissez la propriete CSS a laquelle appliquer l'unite de vue, comme min-height ou height.
- Copiez la declaration CSS avec l'unite moderne et une solution de repli vh classique.
A quoi il sert
- Creer une section hero qui remplit exactement l'ecran visible sur les appareils mobiles.
- Empêcher que le contenu soit cache derriere la barre d'outils du navigateur mobile lors du defilement.
- Construire des panneaux plein ecran qui s'adaptent aux changements de taille de la fenetre lorsque l'interface du navigateur apparait et se retracte.