在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事件来处理这些变化,并确保布局能够自适应调整。
