Question

我使用Jquery来获取显示网站的设备的高度，以确保我的主页的高度为100％，滚动时，标题菜单将固定为顶部。为此，我使用functiun测量Window InnerHeight，在文档就绪时调用它，以及窗口调整大小事件（当用户在移动设备上更改portrait / landscpae模式时保持设计清洁，或者在桌面上调整窗口大小）。

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

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

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

Answer 1

我知道这个答案迟了一年，但我也在努力解决这个问题。我发现使用＆＃34; window.document.documentElement.clientHeight＆＃34;而不是＆＃34; $（窗口）.innerHeight（）;＆＃34;这样当地址栏消失时你的最小高度目标元素不会再次调整大小以填充额外的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 {

  }
});

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

1 个答案: