JS如何准确获取屏幕高度？

在JavaScript中获取屏幕的高度是一个常见的需求，特别是在响应式设计、全屏布局或需要根据视口尺寸调整元素样式的场景中，屏幕高度通常指的是设备显示区域的高度，包括浏览器窗口的可视区域高度、屏幕的总高度等，不同的获取方式适用于不同的场景,下面将详细介绍几种常用的方法及其应用场景。

（图片来源网络，侵删）

最常用的方法是使用window.innerHeight属性，这个属性返回浏览器窗口的视口高度，即浏览器中可见内容区域的高度，不包括浏览器工具栏、滚动条等部分，当需要根据视口高度动态调整某个元素的高度时，可以使用window.innerHeight，假设有一个div元素需要始终占据整个视口高度,可以通过以下代码实现：

const element = document.getElementById('myElement');
element.style.height = window.innerHeight + 'px';

需要注意的是，window.innerHeight在窗口大小改变时会发生变化，因此如果需要在窗口大小改变时重新获取高度，可以结合resize事件监听器使用：

window.addEventListener('resize', function() {
    const newHeight = window.innerHeight;
    console.log('新的视口高度：', newHeight);
});

如果需要获取整个屏幕的高度，包括操作系统任务栏、菜单栏等不可见区域的高度，可以使用screen.height属性，这个属性返回设备屏幕的总高度，单位是像素，在开发全屏应用时,可能需要知道屏幕的总高度以确保内容完全覆盖：

const totalScreenHeight = screen.height;
console.log('屏幕总高度：', totalScreenHeight);

与screen.height类似的还有screen.availHeight属性，它返回屏幕中可用的高度，即排除任务栏、Dock栏等系统UI占据的高度后的剩余区域，在需要最大化利用屏幕空间时，可以使用screen.availHeight：

（图片来源网络，侵删）

const availableScreenHeight = screen.availHeight;
console.log('屏幕可用高度：', availableScreenHeight);

除了上述方法，还可以使用document.documentElement.clientHeight或document.body.clientHeight来获取视口高度，这两个属性在某些情况下与window.innerHeight返回的值相同，但在某些浏览器中可能存在差异，当页面有滚动条时，document.documentElement.clientHeight可能不包括滚动条的高度，而window.innerHeight会包括，在实际开发中，建议优先使用window.innerHeight,因为它更直观且兼容性更好。

为了更清晰地比较这些方法的区别,可以通过以下表格进行总结：

属性	返回值	包括滚动条	适用场景
`window.innerHeight`	浏览器视口高度	是	动态调整元素高度、响应式设计
`screen.height`	屏幕总高度	否	全屏应用、获取设备屏幕尺寸
`screen.availHeight`	屏幕可用高度	否	最大化利用屏幕空间
`document.documentElement.clientHeight`	视口高度（不含滚动条）	否	兼容性处理、特定布局需求

在实际开发中，选择哪种方法取决于具体需求，开发一个全屏背景视频时，可能需要使用screen.height来确保视频覆盖整个屏幕；而开发一个自适应高度的导航栏时，则可以使用window.innerHeight来动态调整高度。

需要注意的是，不同设备和浏览器对这些属性的支持可能存在差异，在移动设备上，window.innerHeight可能会因为地址栏的显示和隐藏而发生变化，因此需要结合resize事件和orientationchange事件来处理窗口大小变化的情况，在服务器端渲染（SSR）或某些非浏览器环境中，这些属性可能不可用,因此需要添加相应的判断逻辑：

（图片来源网络，侵删）

if (typeof window !== 'undefined') {
    const height = window.innerHeight;
    // 使用height
} else {
    // 服务器端或非浏览器环境的处理逻辑
}

关于获取屏幕高度的性能问题，频繁调用这些属性可能会影响性能，特别是在resize事件处理函数中，为了避免性能问题，可以使用防抖（debounce）或节流（throttle）技术来限制函数的调用频率，使用防抖技术优化resize事件：

function debounce(func, delay) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}
function handleResize() {
    console.log('窗口大小改变，当前高度：', window.innerHeight);
}
window.addEventListener('resize', debounce(handleResize, 200));

相关问答FAQs：

问：window.innerHeight和document.documentElement.clientHeight有什么区别？
答：window.innerHeight返回浏览器视口的完整高度，包括滚动条的高度；而document.documentElement.clientHeight返回视口高度，但不包括滚动条的高度，在大多数现代浏览器中，如果页面没有滚动条，两者的值相同；但如果页面有滚动条，window.innerHeight的值会比document.documentElement.clientHeight小,因为滚动条占用了部分空间。
问：为什么在移动设备上window.innerHeight的值会频繁变化？
答：在移动设备上，window.innerHeight的值可能会因为地址栏、工具栏等浏览器UI元素的显示和隐藏而发生变化，当用户滚动页面时，某些浏览器的地址栏会自动隐藏，导致视口高度增加；反之，当用户点击输入框时，地址栏可能会显示，导致视口高度减少，在移动端开发中，需要监听resize和orientationchange事件来处理这些变化,并确保布局能够自适应调整。