查看视口的尺寸
视口就是我们的可视区，因为我们改变浏览器的大小的时候会改变可视区的大小，那么我们如何来查看当前浏览器的可视区大小？
这里我们依然有两套方法：
第一套是window.innerHeight/window.innerWidth;
这个方法可以直接获取到当前可视区的宽高，但是依然很遗憾的是IE8以及以下的版本不兼容。
这个时候就需要第二套方法了：
在标准模式下，doucment.documentElement.clientWidth/document.documentElement.clientHeight
在任何浏览器都兼容。
在怪异模式（混杂模式）下，
document.body.clientWidth/document.body.clientHeight
才能查看视口大小，而不能使用上面标准模式下的方法。
• 什么是怪异模式和标准模式呢？
浏览器的渲染模式有两种：标准模式和怪异模式。我们常用的是标准模式，怪异模式是防止浏览器升级版本过高对后面版本你的代码不兼容，让浏览器可以向后兼容其他低版本的代码的法规则，比如IE6的怪异模式下可以兼容IE5个IE4的语法。
• 我们如何变成怪异模式呢？
其实很简单，只需要把我们html代码的第一行的<!DOCTYPE HTML>去掉就可以变成怪异模式了，而加上这一行代码就可以变成标准模式。
• 如何判断怪异模式还是标准模式？
document上中有一个方法叫做compatMode，当浏览器处于怪异模式的时候会返回字符串“BackCompat”，在标准模式下可以返回“CSS1Compat”，通过这个方法我们就可以判断了。
知道了什么是标准模式和怪异模式以及如何判断的情况下，我们就可以封装一个兼容性的函数，返回浏览器的视口大小
1 function getViewportOffset () { 2 if(window.innerWidth) { 3 return { 4 w: window.innerWidth, 5 h: window.innerHeight 6 } 7 } 8 if(document.compatMode == ‘CSS1Compat’) { 9 return { 10 w: document.documentElement.clientWidth, 11 h: document.documentElement.clientHeight 12 }else { 13 return { 14 w: document.body.clientWidth, 15 h: document.body.clientHeight 16 } 17 } 18 }