js如何跨浏览器获取浏览器视口大小？

Question

根据js高程上的代码：

var pageHeight = window.innerHeight;

if (typeof pageHeight != "number") {

    if (document.compatMode == 'CSS1Compat') {

        pageHeight = document.documentElement.clientHeight;

    } else {

        pageHeight = document.body.clientHeight;

    }

}

这段代码在firefox、chrome上获取的是window.innerHeght，但是在ie上：

• ie9~11：window.innerHeight 985px

• ie7、8：document.body.clientHeight 24px

• ie5：document.body.clientHeight 981px

在ie7、8上的document.body.clientHeight实际上只是body的高度，不是整个浏览器视口的高度。

到底有什么方法能够跨浏览器获取浏览器页面高度？

Answer 1

document.documentElement.clientHeight手边没ie7、8没法测试效果。但是一般我们做此设置html,body{    width:100%;    height:100%}然后用document.body.clientHeight就行了然后高程上document.compatMode == 'CSS1Compat'内的应该是针对doctype声明不是!doctype html的。所以ie7、8还是会走else。你可以加个断点或者console.log试试