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

问题描述

我在侧边栏所在的位置创建了一个 Angular 应用程序height: 100%。但是，在 Chrome for Android 中查看 webapp 时，滚动文档时：

镀铬地址栏轻轻向上滑动
100% 真实尺寸保持不变，直到您 TouchEnd

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

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

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

标签： androidcssviewportaddress-bargoogle-chrome-android

我能够通过

创建一个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 变量。

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

问题描述

解决方案

推荐阅读