如何实现跨浏览器确定窗口的大小:
在IE9+,Firefox,Safari,Opera,Chrome浏览器中均提供了4个属性,innerWidth,innerHeight,outerWidth,outerHeight;,这几个值在不同的浏览器情况下的定义是不同的
,而要获得视口的大小,有两种方法:
在IE,Safari,Opera Chrome,中,document.documentElement.clientWidth和document.documentElement.clientHeight 保存了页面视口的信息,在IE6之中,这些属性必须在标准模式下才起作用,如果是混杂模式,必须通过document.body.clientwidth document.body.clentHeight来获取视口信息
而对于Chrome而言,这两种方式都可以取到视口的大小
,要实现在各个浏览器中都能实现可靠的实现,兼容代码如下:
var pageWidth=window.innerWidth, pageHeight=window.innerHeight; if(typeof pageWidth!="number"){//检查pageWidth中保存的是不是一个数值,如果不是,通过检查document.compatMode来确定是否处于标准模式 if(document.compatMode=="CSS1Compat"){//如果处于标准模式,则通过documentElement调用 pageWidth=document.documentElement.clientWidth; pageHeight=document.documentElement.clientHeight; }else{//否则,通过document.body来确定 pageWidth=document.body.clientWidth; pageHeight=document.body.clientHeight; } }
通过这段代码获取的视口大小,可以实现对于不同浏览器的兼容
,2,通过resizeTo(),resizeBy(),可以实现调整浏览器窗口的大小
时间: 2024-10-05 20:43:46