当移动地址栏出现/消失时，防止更改窗口高度

Prevent window height change when mobile address bar appears / disapears

本文关键字：高度 窗口 地址栏 移动 消失      更新时间：2023-09-26

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

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

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

有没有一种方法可以获得窗口大小，而不受显示地址栏的影响？

我知道这个答案晚了一年，但我也一直在努力解决这个问题。我发现使用"window.dococumentElement.clientHeight"而不是"$（window）.ninnerHeight（）；"可以使地址栏消失时，最小高度目标元素不会再次调整大小以填充额外的50像素左右。

以下是我在项目中使用的内容：

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 {
  }
});
相关文章：