关于窗口宽高的获取

firefox下测试，ie7~Edge

3种方法能够确定浏览器窗口的尺寸

方法1（ie8及其以下undefined）

console.log( window.innerHeight )//- 浏览器窗口的内部高度 //662(由于打开了控制台)
console.log( window.innerWidth )//- 浏览器窗口的内部宽度 //1920(有无滚动条都不变)

方法2

//8(获取的是文档元素宽、高。没设高度时。只有8px的margin,设置高为2000px则为2000px)
console.log( document.documentElement.clientHeight ) 
console.log( document.documentElement.clientWidth )  //1920(滚动条1903)

方法3：

    document.body.clientHeight  //662
    document.body.clientWidth    //1920(滚动条1903)

综合测试

        //我的屏幕：1920 * 1080,在ie下测试下边代码，就能看出区别了。
        //前提：body的高度设置为2000px,做如下测试(控制台会导致高度改变)
            var h = window.innerHeight
            var _h = document.documentElement.clientHeight
            var _hh = document.body.clientHeight
            var w = window.innerWidth
            var _w = document.documentElement.clientWidth
            var _ww = document.body.clientWidth
            console.log( h )    //663
            console.log( _h )   //2016
            console.log( _hh )  //663
            console.log( w )    //1920
            console.log( _w )   //1903
            console.log( _ww )  //1903

在ie下能正常运行，兼容写法：

    var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

window.screen 对象包含有关用户屏幕的信息。

对象在编写时可以不使用 window 这个前缀。

            //屏幕宽、高多少就是多少
            var w = screen.availWidth
            var h = screen.availHeight
            console.log( h )  // 1040
            console.log( w )  //1920

2016.8.22