前端开发

 首页 > 前端开发 > html教程 > 跨浏览器窗口大小兼容js及innerWidth、innerHeight、outerWidth和outerHeight属性

跨浏览器窗口大小兼容js及innerWidth、innerHeight、outerWidth和outerHeight属性

分享到:
【字体:
导读:
         [导读] 跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中,outerWidth和outerHeight返回浏览...

   跨浏览器确定一个窗口的大小不是一件简单的事。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中单个标签页对应的浏览器窗口。

分享到:
HTMl中Meta标签详解以及meta property=og...
meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使...
HTML5 Canvas的文本颜色
HTML5 Canvas的文本颜色,我们可以使用的字体在画布范围内的属性。 下面我们就做一个简单的实例为大家讲解下,基本语法: context.fillStyle=[value];  HTML5 Canvas Text Color 实例       html5_canvas_text_color   body {margin: 0px;padding: 0px;} #myCanvas {border: 1px solid #9C989...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……