跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。在Opera中，这两个属性的值表示页面视图容器①的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中，outerWidth.outerHeight与innerWidth，innerHeight返回相同的值，即视口(viewport)大小而非浏览器窗口大小。

IE没有提供取得当前浏览器窗口尺寸的属性;不过，它通过DOM提供了页面可见区域的相关信息。

在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和

document.documentElement.clientHeight中保存了页面视口的信息。在IE6中，这些属性必须在标准模式下才有效;如果是混杂模式，就必须通过do crunent.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过docurnent.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小。

虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示：

var pageWidth=window.innerWidth,

pageHeight=window.innerHeight;

if ( typeof pageWidth !="number")t

if ( document.compatMode== "CSSICompat"){

pageWidth=document.documentElement.clientWidth;

pageHeight=document.documentElement.clientHeight;

} else{

pageWidth=document.body.clientWidth;

pageHeight=document.body.clientHeight;

}

}

在以上代码中，我们首先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值;南昌网站设计公司技术认为如果不是，则通过检查document.compatMode来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的直。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

另外，使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。来看下面的例子：

//调整到100×100

window.resizeTo(100,100);

//调整到200 x150

window.resizeBy(IOO,50);

//调整到300x300

window.resizeTo(300,300);

南昌网络公司工程师提醒广大站长需要注意的是，这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用;而且，在Opera和IE 7(及更高版本)中默认就是禁用的。另外，这两个方法同样不适用于框架，而只能对最外层的 window对象使用。

①这里所谓的“页面视图容器”指的是Opera中单个标签页对应的浏览器窗口。

本文仅限内部技术人员学习交流,不得作于其他商业用途.文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn 如转载请注明出处!