移动端无浏览器UI（地址栏）时视口高度适配问题求助

移动端浏览器的地址栏、工具栏这些动态UI会随时改变实际可见视口高度，标准100vh是按布局视口计算的，不会跟着这些UI动态调整，所以才会出现内容被遮挡、被迫滚动的情况。你试过的dvh本应是原生解决方案，但可能碰到了浏览器兼容性问题，或是在App内嵌WebView这类特殊场景下失效；之前的JS方案大概率没抓准视口变化的时机——地址栏展开/折叠时，不光会触发resize，还可能触发滚动事件，只监听resize会漏掉这些场景。

下面给两个经过验证的有效方案：

方案1：优化visualViewport监听 #

visualViewport能精准获取当前用户实际能看到的视口高度，我们需要监听它的resize和scroll事件，同时处理页面加载、设备旋转的情况，实时更新CSS变量：

function setViewportHeight() {
  const vh = window.visualViewport.height * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 监听视口尺寸变化
window.visualViewport.addEventListener('resize', setViewportHeight);
// 地址栏折叠/展开可能触发滚动，也要更新
window.visualViewport.addEventListener('scroll', setViewportHeight);
// 页面加载完成后初始化
window.addEventListener('load', setViewportHeight);
// 处理设备旋转
window.addEventListener('orientationchange', setViewportHeight);

// 页面初始化时先执行一次
setViewportHeight();

对应的CSS：

body {
  height: calc(var(--vh, 1vh) * 100);
  margin: 0; /* 去掉默认边距避免额外高度 */
  overflow: hidden;
}

方案2：用ResizeObserver监听根元素 #

如果上面的方案还是有问题，可以用ResizeObserver监听根元素的尺寸变化，确保高度始终匹配可见视口：

const resizeObserver = new ResizeObserver(() => {
  const realHeight = window.visualViewport.height;
  document.documentElement.style.setProperty('--real-vh', `${realHeight}px`);
});

resizeObserver.observe(document.documentElement);
// 初始设置高度
document.documentElement.style.setProperty('--real-vh', `${window.visualViewport.height}px`);

对应的CSS：

body {
  height: var(--real-vh);
  margin: 0;
  overflow: hidden;
}

额外注意点 #

• 一定要去掉body的默认边距，不然会额外增加高度导致滚动；
• 如果是在App内嵌的WebView里，可能需要App端配合设置WebView参数，比如禁用自动缩放、设置viewport-fit=cover；
• 测试时要覆盖不同浏览器（Chrome、Safari移动端）和设备（iOS、Android），部分旧设备可能需要做降级处理。

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