返回浏览器视口尺寸getViewportOffset()

321 阅读1分钟

查看视口的尺寸

window.innerWidth/innerHeight----IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight--标准模式下,任意浏览器都兼容<!doctype html>

document.body.clientWidth/clientHeight--适用于怪异模式下的浏览器(即去掉(!doctype html)

document.compatMode兼容。CSS1Compat标准模式下----/BackCompat向后兼容怪异模式下

切换Dock side才能看到横向和纵向的尺寸 查看视口尺寸1-06-18 072534.jpg

// 没有横向滚动条的时候两者相等window.innerWidth=document.documentElement.clientWidth,但是加上横向滚动条后就不一样了

2.2没有滚动条-06-19 091749.jpg

封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

      function getViewportOffset(){
          if(window.innerWidth){
              return{
                  w:window.innerWidth,
                  h:window.innerHeight
              }
          }else{
              if(document.compatMode == "BackMode"){
              return{
                  w:document.body.clientWidth,
                  h:document.body.clientHeight
              }
          }else{
              return{
                 w:document.documentElement.clientWidth,
                 h:document.documentElement.clientHeight 
              }
              }
          }
      }

返回视口尺寸-06-18 080045.jpg