获取浏览器视口和屏幕宽高

//包含滚动条但不包括工具栏的可视内容大小
window.innerHeight - 浏览器窗口的内部高度 
window.innerWidth - 浏览器窗口的内部宽度
//or
document.documentElement.clientHeight
document.documentElement.clientWidth
//or
document.body.clientHeight
document.body.clientWidth

整个浏览器窗口的宽度，包含工具栏和滚动条的获取方式：

//包含windows任务栏的整个屏幕宽
window.screen.width
window.screen.height

//整个浏览器的宽度
window.outerWidth
window.outerHeight

---

image.png

可见区域宽： document.body.clientWidth;
可见区域高： document.body.clientHeight;
可见区域宽： document.body.offsetWidth (包括边线的宽);
可见区域高： document.body.offsetHeight (包括边线的宽);
正文全文宽： document.body.scrollWidth;
正文全文高： document.body.scrollHeight;
被卷去的高： document.body.scrollTop;
被卷去的左： document.body.scrollLeft;
正文部分上： window.screenTop;
正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

参考博文地址：https://blog.csdn.net/fly_wugui/article/details/81110173