如何防止 100vh 元素导致 Instagram 浏览器出现问题？

Question

我的主页上有一些全高 (100vh) 元素，它们在所有浏览器上都能正常工作，除了通过 Instagram 浏览器查看网站时除外。在 Instagram 浏览器上显示和隐藏自身的动态导航选项卡会导致高度发生变化并导致滚动不稳定。我尝试将其更改为 lvh 或 svh 值，也修复背景位置以保持高度静态，但它似乎不适用于 Instagram。有没有人有这方面的经验或建议？

Answer 1

尝试使用基于百分比的高度，例如

height: 100%

。

vh

单位始终指最大可能的高度。某些移动浏览器的底部会有导航栏，因此

vh

将等于视口高度 + 此导航栏高度。这意味着当页面首次加载时，100vh 实际上会比可视区域高很多。