跨浏览器下确定窗口大小

跨浏览器得到窗口大小，可以让整个页面铺满浏览器可见视图大小，可通过设置CSS中的元素属性width：100%；height：100%（继承于父元素宽和高）来解决。但最近做了一页面，头部的高度已经确定，想要实现除头部以外页面铺满剩下的可见视图大小，通过设置width：100%，可以让宽度铺满整个屏幕,而想要高度能够铺满，我的一种解决方法是通过获取当前的视口大小减去头部的高度来实现，下面是具体的实现方法及原理介绍。
IE9+，FireFOX,Safari,Opera和Chrome提供了四个属性：innerWidth、innerHeight、outerWidth、outerHeight.在IE9+，FireFOX,Safari中outerWidth、outerHeight表示返回浏览器本身的尺寸，在Opera中，这两个属性的值表示页面试图容器的大小，而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度），在Chrome中innerWidth、innerHeight、outerWidth、outerHeight返回的值相同，即视口的大小而非浏览器窗口大小。
IE8及更早的版本没有提供这个属性，但是它通过DOM提供了页面可见区域的相关信息。在IE,FireFox，Safari,Opera和Chrome中，document.documentElement.clientWidth和document.doucumentElement.clientHeight保存了页面视口的信息，在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.Width和document.body.Height取得相同的信息，而对于混杂模式下的Chrome，通过这两种方法都可以取得视口的大小。好的兼容性代码如下所示。

    var pageWidth=window.innerWidth,
        pageHeight=window.innerHeight;
    if(typeof pageWidth!="number"){//检查pageWidth是否是一数值
        if(document.compatMode=="CSS1Compat"){//检查页面是否处于标准模式
            pageWidth=document.documentElement.clientWidth;
            pageHeight=document.documentElement.clientHeight;
        }
        else{
            pageWidth=document.body.clientWidth;
            pageHeight=document.body.clientHeight;
        }

    }

对于移动设备，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小，但移动IE浏览器不支持这些属性，通过document.documentElement.clientWidth和document.documentElement.clientHeight提供了相同的信息，随着页面的缩放，这些值也会相应变化。对于移动设备视口比较复杂，它区别去桌面浏览器，最好要先检测用户是否在使用移动设备，再决定使用哪个属性。有关移动web开发，可以参考阅读这篇文章http://t.cn/z0ZS0Tz