由于浏览器UI,CSS 100vh在移动设备上太高了

Question

解决此问题的最佳方法是什么？显然,移动设备上的所有浏览器都在顶部有一个UI(地址栏等).这会为视口增加额外的高度,因此我使用100vh的网站缺少一个部分.

我假设不同的浏览器有不同大小的视口,因为这样,我可以简单地做一些类似height: calc(100vh - 50px)或高低的东西,但它在所有移动浏览器上都不匹配对吗？

Answer 1

通常,100vh高度将考虑调整后的高度,这就是为什么当带有滑动地址栏的浏览器向下滑动时,移动页面通常会变得很时髦; 但是,显然有这么多的移动浏览器你不能依赖它.

地址栏的高度在浏览器中不会保持不变,所以我不建议添加vh.

尝试使用-50px属性设置高度(在javascript内).

function resetHeight(){
    // reset the body height to that of the inner browser
    document.body.style.height = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();

请原谅任何错误,我有一段时间没有与JS合作过.

Answer 2

在现代浏览器中，您可以使用该dvh单位，它指的是动态视口。有关这些新单元的更多信息，请参阅相关的can I use和web.dev 文章。

Answer 3

接受的答案对我不起作用。我不得不做两个调整：

• 使用 document.body.style.height 而不是 document.body.height

• 在 window.innerHeight 的末尾添加 'px'

  document.body.style.height = ${window.innerHeight}px;