如何确定移动端浏览器的真实视口/窗口高度？解决100vh适配异常

桌面端实现与窗口等高的div，常规写法非常简单，仅需编写如下CSS代码：

div{
  height: 100vh;
}

该写法在桌面端可以完全符合预期，但在移动端Chrome、Safari浏览器中均存在兼容问题：最终渲染出的div高度会大于实际可视视口高度，导致div出现多余滚动条，不符合使用要求。

可行解决方案 #

• 方案一：使用动态自定义单位适配
  通过JavaScript动态计算可视视口高度，注入CSS自定义属性供样式调用：
  CSS代码：

div {
  /* 不支持自定义属性的环境降级写法 */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

JavaScript代码：

// 计算1vh对应的实际像素值
const setVh = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setVh();
// 监听窗口大小变化、横竖屏切换时更新数值
window.addEventListener('resize', setVh);
window.addEventListener('orientationchange', setVh);

• 方案二：使用百分比高度继承体系
  通过给所有父级元素设置100%高度，通过高度继承实现等高效果，无需JS介入，兼容性最佳：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.target-div {
  height: 100%;
}

• 方案三：Webkit内核浏览器专属适配
  针对移动端Webkit内核浏览器可以使用-webkit-fill-available属性适配：

.target-div {
  height: 100vh;
  height: -webkit-fill-available;
}

内容的提问来源于stack exchange，提问作者howard