在移动设备上滚动时，视口高度会快速闪烁

Question

所以我在我的网站中使用了很多vh，在移动浏览器中，当您向下滚动页面时浏览器的地址栏消失，当您向后滚动时重新出现（例如chrome）

我的问题是，当发生这种情况时，由于地址栏在我的文档高度中产生的差异，我页面中的所有内容都会调整大小

是否有解决此问题的方法，例如首先使用 jQuery 计算当前设备的 vh，然后将所有内容转换为 px 而不是 vh？

或任何其他建议

谢谢

Answer 1

几天前我遇到了这个完全相同的问题，我想出的解决方案是这样的：

$(window).on('load', function() {
   var $vhElement = $("#vhElement");   //Your element with 100vh
   var height = $vhElement.height();   //Get rendered height in px
   $vhElement.css("height", height + "px");  //Override vh height with px height
});

如果您有多个元素需要这个，您可以对所有元素应用 class 并使用以下

 $(window).on('load', function() {
   var $vhElements = $(".vhElement");   //Your elements using vh
   $vhElements.each(function() {
       var height = $(this).height();   //Get rendered height in px
       $(this).css("height", height + "px");  //Override vh height with px height
   });
});

在移动设备上滚动时，视口高度会快速闪烁

viewport height makes a snappy flicker when scrolling on mobile devices

css

jquery

viewport

responsive-design