JS -获取屏幕/浏览器高度

一、展示图

二、屏幕信息

1. window.screen.height：设备显示屏的高度
   这个是设备显示屏的高度，各个机型的显示屏高度都不一样，可以在系统设置中看
2. window.screen.availHeight：屏幕的可用高度
   一般是显示屏高度减去显示屏工具栏的高度
   任务栏高度 = screen.height - screen.availHeight

三、浏览器信息

1. window.outerHeight ：浏览器高度
   这个是浏览器的高度，浏览器缩放会影响高度
2. window.innerHeight ：浏览器内页面可用高度
   浏览器的可用高度，即浏览器高度-顶部工具栏-底部滑动栏，若有调试面板还会再减去调度面板的高度，最后得出的才是可用高度

四、页面信息

1. document.body.offsetHeight ：body总高度
2. document.body.clientHeight ：body展示的高度
   clientHeight = topPadding + bottomPadding+ height - 水平滚动条高度
   offsetHeight = padding + height + border = clientHeight + 滚动条 + 边框
   offsetHeight 和 clientHeight 的高度区别就在于边框高度

五、参考链接：

1. HTML 获取屏幕、浏览器、页面的高度宽度
2. js获取屏幕高度/浏览器高度
3. offsetHeight, clientHeight与scrollHeight的区别