臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏

如何解决臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏

我创建了一个侧边栏为 overflow: hidden 的 Angular 应用。但是，在 Chrome for Android 中查看网络应用程序时，滚动文档时：

chrome 地址栏轻轻向上滑动
100% 实际尺寸保持不变，直到您 TouchEnd 为止

The darkgrey sidebar 是 height: 100%，因此顶部栏通常应始终保持可见，并始终填充顶部栏和最底部之间的剩余空间。

我已经尝试了几种方法来解决这个问题。页脚有 height: calc(100% - 55px) 并且这个实际上总是正确呈现。所以这让我尝试使用 bottom: 0 而不是 top: 55px; bottom: 0。但是从您同时设置 height: calc(100% - 55px) 和 top 的那一刻起，结果与设置高度相同。

有没有人知道在地址栏出现/消失时让视口调整其高度的方法？

解决方法

我能够通过

解决这个问题

创建一个 css 变量 (variables.scss)

:root {
  --viewport-height: 100%;
}

不要使用100%，而是使用var(--viewport-height)

height: calc(100% - 55px);

变成

height: calc(var(--viewport-height) - 55px);

然后绑定到 visualViewport.resize 事件（此处必须使用 addEventListener）

if (!serverSide) {
  visualViewport.addEventListener('resize',() => {
    document.documentElement.style.setProperty('--viewport-height',`${visualViewport.height}px`);
  });
}

确保没有为 height 属性设置过渡。