android 的 chrome 臭名昭著的 height:100% 问题 - 地址栏

Question

我创建了一个 angular 应用程序，其中边栏是 height: 100%。但是，当在 Chrome 中查看 Android 中的 webapp 时，当滚动文档时：

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

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

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

有谁知道在地址栏为 appearing/disappearing 时调整视口高度的方法吗？

Answer 1

我通过

解决了这个问题

正在创建一个 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`);
  });
}

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

CSS 变量受 all major browsers 支持。

android 的 chrome 臭名昭著的 height:100% 问题 - 地址栏

Infamous height:100% issue on chrome for android - address bar

android

css

viewport

address-bar

google-chrome-android