所以我在我的网站中使用了很多vh,在移动浏览器中,当你向下滚动页面时浏览器的地址栏消失,当你向后滚动时重新出现(例如chrome)
我的问题是,当发生这种情况时,由于地址栏在我的文档高度中产生的差异,我页面中的所有内容都会调整大小
是否有任何解决方法,例如首先使用 jQuery 计算当前设备的 vh,然后将所有内容转换为 px 而不是 vh?
或任何其他建议
谢谢
最佳答案
几天前我遇到了这个完全相同的问题,我想出的解决方案是这样的:
$(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
});
如果您有多个元素需要这个,您可以对所有元素应用一个类并使用以下内容
$(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
});
});
关于jquery - 在移动设备上滚动时,视口(viewport)高度会快速闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40307722/