移动设备上的视口高度

Question

因此，我在尝试设计响应式网站时遇到了一些麻烦。问题来自于我使用vh单位，将div的某些部分设置为视口高度的100％。

虽然这在桌面上完全正常，但我的问题是移动设备上的视口实际更改：

• 向下滚动导航栏（例如，从chrome中）消失，使视口更高。当发生这种情况时，基于vh单元的div重新适应并使所有内容都滑动一点（当你向下滚动时，这真的不好看。）
• 如果你想重新找回错过的东西，向上滚动会使导航栏再次出现，而所有内容都会从另一个方向再次滑动。

所以基本上，如果用户在我的网站上上下滑动，这个问题会让它的体验方式变得更糟糕。

是否有任何解决方案可以让我设置div太完整的视口尺寸而不允许调整大小/适应调整大小的内容？

Answer 1

确定。让我们来解决这个问题吧。在这种情况下，我只知道两种解决方案。

• 简单地说“脏”黑客。当导航栏消失时，意味着视口的高度变得更高。您可以使用css3真棒转换:) transition: height 1000000000000000s简单地为其设置动画。谁将如此位于页面上才能看到它？ ）
• 的JavaScript。在页面加载检查视口之前（JavaScript使用导航栏占用高度），将固定高度设置为所有块。