在前端开发中，有时我们需要获取屏幕或浏览器窗口的高度。常用的方法是使用 screen.availHeight 和 $(window).height()（需要 jQuery 库支持）来获取屏幕和窗口的高度。
然而，这两种方法获取的高度值可能存在一些差异。本文将深入解析这些差异，并提供一些指导意义和示例代码。
screen.availHeight 和 $(window).height() 的区别
screen.availHeight
screen.availHeight 是一个只读属性，表示屏幕可用区域的高度，即去除任务栏和操作系统工具栏等非内容区域后的高度。
该属性返回的值是以像素为单位的整数，可以通过以下代码获取：
let screenHeight = window.screen.availHeight; console.log(screenHeight); // 屏幕可用区域高度
$(window).height()
$(window).height() 是 jQuery 库提供的方法，用于获取当前窗口的高度，包括滚动条和边框等。与 screen.availHeight 不同，它返回的是不带单位的浮点数。
使用该方法需要先引入 jQuery 库，然后通过以下代码获取：
let windowHeight = $(window).height(); console.log(windowHeight); // 窗口高度
差异
两者主要的差异在于 $(window).height() 包括了滚动条和边框等，而 screen.availHeight 则不包括。
此外，$(window).height() 还会受到页面元素和样式的影响。例如，如果页面中有一个固定高度的顶部导航栏，在使用 $(window).height() 获取窗口高度时，该导航栏的高度也会被计算在内。
如何正确使用这些属性
在实际开发中，我们应该根据具体需求选择合适的方法来获取屏幕或窗口高度。一般情况下，如果只需要获取屏幕可用区域的高度，则可以使用 screen.availHeight；如果需要获取当前窗口的高度，则可以使用 $(window).height()。
同时，为了避免出现意外的差异，我们还需要注意以下几点：
在使用
$(window).height()时，应该尽量避免依赖页面元素和样式。如果需要获取的是某个元素的高度，应该使用该元素的
offsetHeight属性或 jQuery 的.height()方法。在浏览器窗口大小发生变化时，两者返回的值都可能会发生改变。因此，如果需要实时更新屏幕或窗口高度，可以考虑监听
window对象的resize事件。
示例代码
下面是一些示例代码，演示如何使用这些属性来获取屏幕或窗口高度：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------- ------- ------ ------------------ ----------------- ----------------------------- ------------- ----------------------------- ------- ----------------------------------------------------------- -------- -- ---------- --- ------------ - -------------------------- -------------------------------------- -- ------ --- ------------ - ------------------- -------------------------------------- -- - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------