获取浏览器视口尺寸的方法

方法一

直接通过window对象中的属性获取浏览器视口尺寸，现代浏览器都支持。

  • window.innerHeight / innerWidth

    方法二

    间接通过或者元素属性获得视口尺寸，现代浏览器都支持。
    计算公式1document.documentElement.clientHeight / clientWidth + 17px（如果有滚动条，需加上17px）
    计算公式2document.body.clientHeight / clientWidth + 17px（如果有滚动条，需加上17px）+ 16px（元素有margin: 8px）
    关键点1对于元素，计算公式1是正确的。但是对于元素，计算公式2只有在样式设置为html, body{height: 100%}时才有效。不然的话，document.body.clientHeight的值与元素的实际宽高有关。

    方法三（兼容写法IE9/IE8以下版本）

    浏览器兼容分析

 window.innerWidth document.documentElement.clientWidth document.body.clientWidth element.clientWidth
Chrome(标准模式) 浏览器可视区域尺寸 属性值不包含滚动条的尺寸（但是视口尺寸的计算需要滚动条尺寸） 属性值不包含滚动条的尺寸以及的margin尺寸 元素实际内容+ padding的尺寸，与浏览器的视口尺寸无关。
Chrome(怪异模式) 浏览器可视区域尺寸 同上 属性值不包含滚动条的尺寸（但是视口尺寸的计算需要滚动条尺寸）。在该模式下的margin尺寸又加到了属性里。 同上
IE8及以下(标准模式) 没有 同上 属性值不包含滚动条的尺寸以及的margin尺寸 同上
IE8及以下(怪异模式) 没有 没有 不包含滚动条的17px（如果有） 同上