窗口大小

  跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight。在IE9+、Safari和Firefox中,outerWidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。在Opera中,这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中,outerWidth、outerHeight 与innerWidth、innerHeight返回相同的值,即视口(viewport)大小而非浏览器窗口大小。IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。

  在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。在IE6中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome,则无论通过document.documentEle-ment还是document.body中的clientWidth和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;
}
}

  PS: 对于移动设备,window.innerWidth和window.innerHeight保存着可见视口,也就是屏幕上可见页面区域的大小。移动IE 浏览器不支持这些属性,但通过document.documentElement.client-Width和document.documentElement.clientHeihgt提供了相同的信息。随着页面的缩放,这些值也会相应变化。

获取window窗口大小的更多相关文章

  1. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  2. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

  3. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  4. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  5. 根据iframe获取window

    今天使用layui弹出窗口,需要将函数写在弹出的窗口,但是按钮事件是在父层窗口绑定的,这样就要在父层窗口调用子层窗口的函数. 子层函数与父层函数 function topup() { console. ...

  6. js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别

    <script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...

  7. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. Javascript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  9. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

随机推荐

  1. JS开发HTML5游戏《神奇的六边形》(三)

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  2. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  3. 每天一个linux命令(52):scp命令

    scp 是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且 scp传输是加密的.可能会稍微影响一下速度.当你服 ...

  4. iOS边练边学--Http网络再学习,简单介绍

    一.URL 什么是URL URL中常见的协议 二.Http Http的基本通信过程 发送Http请求的方法 GET 和 POST 对比 GET 和 POST 的选择 三.iOS中的Http学习 iOS ...

  5. 详解Java中ArrayList、Vector、LinkedList三者的异同点

    转载:https://my.oschina.net/zzw922cn/blog/491631 一.ArrayList ArrayList是一个可以处理变长数组的类型,这里不局限于"数&quo ...

  6. 使用XML序列化器生成XML文件和利用pull解析XML文件

    首先,指定XML格式,我指定的XML格式如下: <?xml version='1.0' encoding='utf-8' standalone='yes' ?> <message&g ...

  7. AU3学习资源

    AU3中文站:http://www.autoitx.com/

  8. jQuery返回顶部代码组件

    非原创,拿来修改,样式可自定义,div,img都可以,效果如下: 下载地址:http://files.cnblogs.com/files/EasonJim/jquery.topback.rar 项目相 ...

  9. Linux LSM(Linux Security Modules) Hook Technology

    目录 . 引言 . Linux Security Module Framework Introduction . LSM Sourcecode Analysis . LSMs Hook Engine: ...

  10. Process manufacturing和Discrete manufacturing的区别

    Process manufacturing(Process industry) 加工制造,或者加工工业.其一个重要特征是,原材料被加工成成品后,我们再也无法将它恢复成原料,比如,苹果罐头,我们再没法把 ...