JS兼容所有浏览器获取浏览器高度和宽度/ 各种宽高代表意思/ 监听窗口变化

 监听窗口变化（只写了高度) this -> Vue 

// 监听窗口变化
    window.addEventListener('resize', () => {
      this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    })

 

获取浏览器宽高（兼容） 

var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

网页可见区域宽：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
浏览器的高（不包括头部）alert(window.innerHeight);

 

 

 

上图 具体讲解 ---> https://blog.csdn.net/q515656712/article/details/105121035