1486 sujets
Web Mobile et responsive web design
Bonsoir,
C'est plus complexe : les navigateurs tels que Chrome prennent en compte la barre de navigation sur desktop mais pas sur la version mobile du navigateur, ce n'est pas un bug mais une stratégie choisie pour raisons de performance. Un 100vh sera donc "buggé" sur un Chrome mobile (100vh de hauteur de la page PLUS la hauteur de la nav' du browser), pire : si l'on scroll la page et que l'on revient sur la position top initiale la barre de navigation est cette fois prise en compte dans le calcul de la hauteur (100vh, hauteur de nav' inclue)... La solution de contournement passera nécessairement par du javascript.
Voir ces discutions : 100vh chrome mobile.
Et notamment les réponses de ce sujet sur Stackoverflow.
Modifié par Olivier C (22 Apr 2018 - 04:18)
C'est plus complexe : les navigateurs tels que Chrome prennent en compte la barre de navigation sur desktop mais pas sur la version mobile du navigateur, ce n'est pas un bug mais une stratégie choisie pour raisons de performance. Un 100vh sera donc "buggé" sur un Chrome mobile (100vh de hauteur de la page PLUS la hauteur de la nav' du browser), pire : si l'on scroll la page et que l'on revient sur la position top initiale la barre de navigation est cette fois prise en compte dans le calcul de la hauteur (100vh, hauteur de nav' inclue)... La solution de contournement passera nécessairement par du javascript.
Voir ces discutions : 100vh chrome mobile.
Et notamment les réponses de ce sujet sur Stackoverflow.
Modifié par Olivier C (22 Apr 2018 - 04:18)
Merci pour ces éléments de réponse.
Alors, après quelques tests, il suffit de remplacer en js,
le containeur de 100vh par la valeur de window.innerHeight.
et on l'actualise sur l'event 'resize' ou 'orientationchange'.
Du coup on arrive à cette bizarrerie...
window.innerHeight est plus petit qu'un élément à 100vh...
Naïvement, je pensais que la hauteur en vh était calculée d’après l'objet window,
il n'en est rien.
Alors, après quelques tests, il suffit de remplacer en js,
le containeur de 100vh par la valeur de window.innerHeight.
et on l'actualise sur l'event 'resize' ou 'orientationchange'.
Du coup on arrive à cette bizarrerie...
window.innerHeight est plus petit qu'un élément à 100vh...
Naïvement, je pensais que la hauteur en vh était calculée d’après l'objet window,
il n'en est rien.