页面可视区高度的获取

开发时，有时候需要获取页面可视区域的高度/宽度，比如滚屏设计、固定层等情况，就用到document.documentElement.clientHeight和document.body.clientHeight，两者有什么区别，到底用谁？
先log一下看看他们的真面目：

可以发现document.documentElement是整个html文档的内容，而document.body只是整个body的内容。再看看他们的值的区别：当页面存在文档类型声明时（即有<!doctype>头），log一下，他们的值为：

当页面没有<!doctype>头时的结果为：

可以发现，他们的值刚好相反过来了，也就是说，他们的取值与<!doctype>头有关，也就是与兼容模式有关！我们要的是页面的可视区高度而不是整个页面的高度，显然是要获取小那个！

一种办法就是与所有的开发人员约定好一定全部要<!doctype>头声明（这个一般情况下都要加的），包括如果想要操作iframe，也要写上；另一种办法就是判断当前页面是否开启了兼容模式来作相应的处理，即通过document.compatMode属性来判断。在有<!doctype>头情况下document.compatMode的值为CSS1Compat，称为标准兼容模式开启，没有文档头声明情况下的值为BackCompat，称为标准模式关闭，可以通过这个属性来正确取舍，比如要获取页面的可视区高度iH时可以这么做：

var de = document.documentElement;
var db = document.body;
var cm = (document.compatMode === "CSS1Compat");
var iH = cm ? de.clientHeight : db.clientHeight;

这样，不管是加没加<!doctype>头声明都能正确的获取可视区高度了。