臭名昭著的高度:android 版 chrome 上的 100% 问题 - 地址栏 [英] Infamous height:100% issue on chrome for android - address bar

问题描述

我创建了一个 angular 应用程序，其中侧边栏是 height: 100%.但是，在 Chrome for Android 中查看网络应用程序时，滚动文档时:

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

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

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

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

解决方案

我能够通过

解决这个问题

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

:root {--视口高度: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 文档
• 链接自文档演示，带有源代码
• 提交参考

I have created an angular app where the sidebar is height: 100%. However when viewing the webapp in Chrome for Android, when scrolling the document:

1. The chrome address bar slides up gently
2. The 100% real size remains the same until you TouchEnd

The darkgrey sidebar is height: calc(100% - 55px) so the top bar should normally always remain visible, and always fill the remaining space between the top bar and the very bottom.

I've already tried several things to get this fixed. The footer has bottom: 0 and this one is in fact always rendered correctly. So this made me try to use top: 55px; bottom: 0 instead of height: calc(100% - 55px). But from the moment you're setting both top and bottom, the result is the same as setting the height.

Does anybody know a way to make the viewport adjust its height while the address bar is appearing/disappearing?

解决方案

I was able to solve this issue by

Creating a css variable (variables.scss)

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

Instead of using 100% use var(--viewport-height)

height: calc(100% - 55px);

becomes

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

Then binding to the visualViewport.resize event (MUST use addEventListener here)

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

Make sure there is no transition set for the height property.

CSS variables are supported by all major browsers.

• VisualViewport docs
• Linked-from-docs Demo with source code
• Commit reference

这篇关于臭名昭著的高度:android 版 chrome 上的 100% 问题 - 地址栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！