由于浏览器用户界面，CSS 100vh在移动设备上过高 [英] CSS 100vh is too tall on mobile due to browser UI

问题描述

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

What is the best way to solve this issue. Obviously all browsers on mobile have got a UI (address bar etc) at the top. This adds additional height to the viewport, so my website which is using 100vh is missing a section.

由于这个原因，我假设不同的浏览器具有不同大小的视口，我可以简单地执行以下操作： height：calc（100vh-50px）或高度是多少，但是不能与所有移动浏览器匹配吗？

I'd assume different browsers have different sized viewports due to this, I could simply do something like height: calc(100vh - 50px) or what ever the height is, but it won't match up on all mobile browsers right?

推荐答案

通常， 100vh 高度将占调整后的高度，因此，当浏览器的地址栏向下滑动时，有时您会看到移动页面变得很时髦。

Usually the 100vh height will account for the adjusted height, with is why you'll sometimes see mobile pages go funky when the browser's address bar slides down.

对于不考虑<$ c内滑动条的浏览器$ c> vh 单位：地址栏的高度在浏览器中不会保持恒定，因此建议不要添加 -50px 。

For browsers that don't account for the sliding bar within the vh unit: The height for the address bars will not be constant across the browsers, so I'd advise against appending -50px.

尝试使用 window.innerheight 属性设置页面的高度（使用javascript）。

Try setting the height of the page (using javascript) with the window.innerheight property.

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

这篇关于由于浏览器用户界面，CSS 100vh在移动设备上过高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！