Un héros de taille 100vh semble correct dans chaque capture d'écran du bureau et faux dans chaque navigateur de poche, car vh mesure toujours la plus grande fenêtre d'affichage, pas celle que vous regardez. La famille à trois préfixes comble cet écart et le correctif est incroyablement ennuyeux à lire.
/* small: never taller than what is visible, bars included */
.hero { min-height: 100svh; }
/* dynamic: tracks the bars as they hide and return */
.photo-fill { height: 100dvh; }L'affaire de l'argent : les barres de navigation mobiles
- Sur mobile, 100vh mesure la plus grande fenêtre d'affichage possible, de sorte qu'un héros pleine hauteur s'assoit en partie derrière la barre inférieure jusqu'à ce que l'utilisateur commence à faire défiler, une première impression vraiment horrible.
- 100svh utilise la petite fenêtre, l'état dans lequel les deux barres sont visibles ; tout ce qui est dimensionné avec est entièrement visible lors du chargement, aucun défilement requis, aucune surprise.
- 100dvh suit les bars en direct. C'est honnête, mais chaque changement provoque une redistribution au milieu du défilement, alors gardez-le hors des piles à hauteur critique et préférez-le pour les remplissages de photos qui doivent couvrir tout ce qui est visible.
Le bureau ne voit rien
Sur les navigateurs de bureau, les trois variantes calculent généralement le même nombre, donc un examen d'un ordinateur portable ne détectera pas le défaut ; il ne s'affiche que sur les appareils dotés de barres dynamiques, c'est exactement là que se produisent la plupart des premières visites. Le mode de conception réactif avec une fenêtre tactile couvre la vérification en quelques secondes.
Le résumé ennuyeux : les sections complètes obtiennent 100 svh, les superpositions immersives obtiennent 100dvh et 100vh reste une réflexion secondaire uniquement sur le bureau. Une astuce gacore, non pas parce qu'elle est intelligente, mais parce que trois lettres remplacent une fois pour toutes une pile de barres de défilement reniflant.