BOM3--标准模式和混杂模式，获取网页宽高

1. 标准模式和混杂模式

1.浏览器在渲染网页的时候有两种模式"标准模式"和"混杂模式"
2.默认情况下都是以标准模式来进行渲染的(CSS1Compat)
3.如果网页没有书写文档声明, 那么就会按照"混杂模式"来进行渲染的(BackCompat)
4.使用document.compatMode可以获取网页的渲染模式

2. 获取网页宽高
   IE9及以上浏览器使用innerWidth/innerHeight获取网页可视区域的宽高

    // console.log(window.innerWidth);
    // console.log(window.innerHeight);

IE8以下浏览器

1.混杂模式 
document.body.clientWidth和document.body.clientHeight
2.标准模式
document.documentElement.clientWidth和document.documentElement.clientHeight

兼容浏览器的获取网页宽高的函数

    function getScreen() {
        let width, height;
        if(window.innerWidth){ //ie9及以上
            width = window.innerWidth;
            height = window.innerHeight;
        }else if(document.compatMode === "BackCompat"){ //混杂模式
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }else{ //标准模式
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        }
        return {
            width: width,
            height: height
        }
    }