100vh在手机上比实际可见部分高

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

如何考虑这些东西呢？

来源

2017-03-16 Alexander Shpindler

用户与页面交互后，URL栏通常不会消失吗？ //如果在使用纯CSS时已经不能计算“正确”了，我怀疑任何试图用JavaScript解决此问题的尝试都会更成功，这可能会遇到同样的问题，即无论您尝试读取的任何屏幕度量都将具有相同的“错误”。 – CBroe

@CBroe不，如果它被隐藏，它总是隐藏的。 –

嗯，我想你可以尝试与JS检查，如果任何相关的属性允许检测到这种情况...屏幕高度与窗口高度等 – CBroe

一种解决方法是将高度设置为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);

它有效。

来源

2017-03-16 15:28:38

100vh在手机上比实际可见部分高

回答

相关问题