html - 移动设备上的视口(viewport)高度

Question

所以我在尝试设计响应式网站时遇到了一些真正的麻烦。问题出在我正在使用 vh 单元，它将我的一些 div 设置为视口(viewport)高度的 100%。

虽然这在桌面上工作得很好，但我的问题是移动设备上的视口(viewport)实际上改变:

• 当您向下滚动时，导航栏(例如从 chrome 中)消失，使视口(viewport)变高。发生这种情况时，基于 vh 单元的 div 会重新适应并使所有内容都滑动一点(向下滚动时确实不好看)。
• 如果您想返回错过的内容，向上滚动会使导航栏再次出现，所有内容都会再次向相反方向滑动。

所以基本上，如果用户在我的网站上上下滑动，这个问题会使它的体验比应有的更糟糕。

是否有任何解决方案允许我将我的 div 设置得过满视口(viewport)尺寸而不允许调整大小/适应调整大小的内容？

Answer 1

好的。让我们解决这个问题。在这种情况下，我只知道 2 种解决方案。

• 简单地说就是“肮脏的”骇客。当导航栏消失时，意味着视口(viewport)的高度变高了。你可以简单地用 css3 很棒的过渡动画 :) transition: height 1000000000000000s。谁会看到这样位于页面上的呢？ )
• JavaScript。在页面加载检查视口(viewport)之前(JavaScript 通过导航栏获取高度)，为所有 block 设置固定高度。