android - 臭名昭著的高度 :100% issue on chrome for android - address bar

Question

我创建了一个 Angular 应用，其中边栏是 height: 100%。但是，在 Chrome for Android 中查看 webapp 时，滚动文档时:

1. Chrome 地址栏轻轻向上滑动
2. 100% 的实际大小在您 TouchEnd 之前保持不变

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

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

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

Answer 1

我能够通过以下方式解决这个问题

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

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

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

height: calc(100% - 55px);

成为

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

然后绑定(bind)到visualViewport.resize事件(这里必须使用addEventListener)

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

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

all major browsers 支持 CSS 变量.

• VisualViewport docs
• 链接自文档 Demo与 source code
• Commit reference