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

问题描述

我正在使用Webflow建立一个网站,遇到了一个似乎很普遍的问题。我的英雄部分在所有屏幕上都应为100vh和100vw。而且我还希望将其设置为固定位置,以便当用户向下滚动时其下方的内容在其上方滑动。在台式机上,一切正常,但在平板电脑和移动版上,浏览器的搜索/地址栏存在问题。

基本上,一旦滚动并最小化搜索/地址栏,屏幕就会弹出“跳转”,以100vh的速度再次显示该网站。

我了解了很多,但是大多数解决方案是几年前的,似乎不再起作用了。

是否有任何代码可以解决此问题,或者我不应该在手机屏幕上不使用固定位置?

解决方法

我不知道您是否已经解决了您的问题,我发现解决此问题的最简单方法是使用:

height:100%

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

你也需要有一个 % 的身高才能让这个工作!