获取浏览器的窗口的大小、浏览器视口的大小、页面的大小

浏览器的窗口： 打开浏览器时整个窗口的大小 随着用户的放大缩小而改变

浏览器视口的大小： viewport就是视口的大小 随着用户的放大缩小而改变

页面的大小： 页面的原始宽高 不会随着用户的操作而改变

 

浏览器的窗口： 可通过window.outerWidth, window.outerHeight来获取

浏览器视口的大小： 

 // 需要判断浏览器使用的模式   
 if(document.compatMode == 'BackCompat'){
  //非标准
  return {
   width: document.body.clientWidth,
   height: document.body.clientHeight,
  }
 }else{
  return {
   width: document.documentElement.clientWidth,
   height: document.documentElement.clientHeight,
  }
 }

chrome也还可以通过window.innerWidth  window.innerHeight来获取    

页面的大小： document.body.clientWidth || document.body.scrollWidth document.body.clientHeight|| document.body.scrollHeight