防止移动地址栏出现/消失时窗口高度变化

Question

我使用 Jquery 来获取显示网站的设备的高度，以确保我的主页具有 100% 的高度，并且当滚动通过时，标题菜单将固定到顶部。 为此，我使用一个函数测量 Window InnerHeight，该函数在文档准备就绪时调用，以及窗口调整大小事件（以在用户在移动设备上更改纵向 / landscpae 模式或在桌面上调整其窗口大小时保持设计整洁）。

移动设备上的问题：android 上的地址栏在页面加载时显示，向下滚动时隐藏，然后在向上滚动时重新出现。这使得一些页面元素在每个机会都会改变大小并移动页面中的内容。对用户来说不愉快。

function setHeight() {
windowHeight = $(window).innerHeight();
$('.home-intro').css('min-height', windowHeight);
}
$( window ).resize(function() {
setHeight();
});

有没有办法获得窗口大小，不受地址栏显示的影响？

Answer 1

我知道这个答案晚了一年，但我也一直在努力解决这个问题。我发现使用“window.document.documentElement.clientHeight”而不是“$(window).innerHeight();”这样当地址栏消失时，您的最小高度目标元素不会再次调整大小以填充额外的 50px 左右。

这是我在项目中使用的：

function adjustBackgrounds() {
    windowHeight = window.document.documentElement.clientHeight;
    $('#section-01-home').css('min-height', windowHeight);
}     
// Triggers Sizing on Load (783 = 800px accounting for 17px of scrollbar)
if ($(window).width() <= 783) {
    adjustBackgrounds();
} else {

}
// Triggers Sizing on Browser Resize (783 = 800px accounting for 17px of scrollbar)
$(window).resize(function() {
  if ($(window).width() <= 783) {
    adjustBackgrounds();
  } else {

  }
});