Je dois couvrir toute la partie visible de la fenêtre du navigateur, mais en utilisant 100vh je me suis heurté à des problèmes sur certains appareils et dans certains navigateurs mobiles. Tout d'abord, dans la section d'url du navigateur Safari se cache une partie supérieure. Deuxièmement, le même problème sur certains appareils Android dans Chrome. 
100vh sur les mobiles est plus grand qu'une partie visible
Comment considérer ces choses?
Une solution consiste à définir une hauteur en tant que window.innerHeight et à définir ces écouteurs d'événements en corrigeant la hauteur lorsque l'écran est redimensionné.
chat.style.height = window.innerHeight + "px";
window.addEventListener("orientationchange", e => {
if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px";
}, false);
window.addEventListener("resize", e => {
if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px";
}, false);
Cela fonctionne.
La barre d'URL ne disparaît-elle généralement pas une fois que l'utilisateur interagit avec la page? // Si cela n'est pas déjà calculé "correct" lors de l'utilisation de CSS pur, je doute que toute tentative de corriger ceci avec JavaScript aurait plus de succès, cela aura probablement les mêmes problèmes que n'importe quelle mesure d'écran que vous essayerez de lire les erreurs". – CBroe
@CBroe Non, si c'est caché c'est toujours caché. –
Eh bien je suppose que vous pouvez essayer de vérifier avec JS si l'une des propriétés pertinentes permettent de détecter ce cas ... hauteur de l'écran vs hauteur de la fenêtre, etc – CBroe