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