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

Question

我创建了一个有角度的应用程序，其中侧边栏是height: 100%。但是，在 Android 版 Chrome 中查看 Web 应用程序时，滚动文档时：

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

深灰色侧边栏通常height: calc(100% - 55px)应始终保持顶部栏可见，并始终填充顶部栏和底部之间的剩余空间。

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

有谁知道如何在地址栏出现/消失时使视口调整其高度？

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`);
  });
}

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

所有主流浏览器都支持 CSS 变量。

• VisualViewport 文档
• Linked-from-docs带有源代码的演示
• 提交参考