Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript跨浏览器确定窗口大小

javascript跨浏览器确定窗口大小

发布时间:2015-02-09   编辑:www.jquerycn.cn
本文介绍下,在javascript中实现跨浏览器确定窗口大小的方法,有需要的朋友参考下吧。

有关浏览器的一些属性,Firefox、Safari、Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight。

在Safari和firefox中,outerWidth和outerHeight返回浏览器窗口本身尺寸(无论是从最外层的window对戏那个还是从某个框架访问)。

在Opera中,这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。

在Chrome中,outerWidth、outerHeight与innerWidth、innerHeight返回相同的值,即视口大小而非浏览器窗口大小。

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

在IE以及Firefox、Safari、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。
在IE6中,这些属性必须在标准模式下才有效;
如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。
而对于混杂模式下的Chrome,则无论通过document.documentElement还是document.body中的clientWidht和clientHeight属性,都可以取得视口的大小。
虽然最终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小,例如:
 

复制代码 代码示例:
var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

您可能感兴趣的文章:
javascript跨浏览器确定窗口大小
IE浏览器打开时窗口显示很小怎么办?
javascript内置对象之window对象
javascript弹出对话框综合实例汇总
javascript编程基础(6)-Window窗口对象
javascript入门 resizeTo()和resizeBy()调整浏览器窗口大小
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
jQuery获取浏览器中的分辨率实现代码
javascript判断弹出窗口是否被屏蔽的方法
JS获取浏览器窗口大小与网页高宽

[关闭]