将 div 设置为固定位置和 100vh 会导致手机和平板电脑上的“跳跃”

Question

我正在使用 Webflow 构建网站，但遇到了一个似乎很常见的问题。我的英雄部分应该在所有屏幕上都是 100vh 和 100vw。而且我还希望它设置为固定位置，这样当用户向下滚动时，它下面的内容就会滑过它。在桌面上一切正常，但在平板电脑和移动设备上，浏览器的搜索/地址栏出现问题。

基本上，一旦您滚动并且搜索/地址栏最小化，屏幕就会“跳跃”以再次以 100vh 显示网站。

我阅读了很多关于此的信息，但大多数解决方案都是几年前的，似乎不再有效。

是否有任何代码可以解决此问题，还是我不应该在移动屏幕上使用固定定位？

Answer 1

我不知道你是否已经解决了你的问题，我发现解决这个问题最简单的方法是使用：

height:100%

而不是使用 100vh。固定位置对我来说效果很好，并且地址栏不再覆盖。

你也需要有一个 % 的身体高度才能工作！