手机上的100vh比真正的可见部分高

Question

我需要覆盖浏览器窗口的整个可见部分但是使用100vh我在某些设备和某些移动浏览器中遇到问题。 首先，在Safari浏览器中，url部分隐藏了一个顶部。 其次，Chrome中的某些Android设备存在同样的问题。

如何考虑这些事情？

Answer 1

一种解决方案是将高度设置为window.innerHeight，并设置这些事件侦听器在屏幕调整大小时更正高度。

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);

有效。