BOM——window对象之窗口大小
来源:互联网 发布:网络接口接触不良 编辑:程序博客网 时间:2024/06/03 21:47
IE9+、Firefox、Safari、Opera、和 Chrome 均提供4个属性:innerWidth、innerHeight、outerWidth 和 outerHeight。
1.在IE9+、Firefox、Safari中,outerHeight/outerWidth返回浏览器窗口本身的大小(无论是从最外层的 window 对象还是从某个框架访问。)
2.在 Opera 中,outerHeight/outerWidth表示页面视图容器( Opera 中单个标签页对应的浏览器窗口)的大小;而innerHeight/innerWidth表示该容器中页面试图去的大小(减去边框宽度)。
3.在 Chrome 中,outerHeight/outerWidth 与 innerHeight/innerWidth 返回相同的值,即视口(viewport)大小而非浏览器窗口大小。
在 IE9+、Firefox、Safari、Opera、和 Chrome中,document.documentElement.clientWidth
和 document.documentElement.clientHeight
中保存了页面视口的信息。但是在 IE6 中,这些属性必须在标准模式下才有效;若是在混杂模式下,就必须通过document.body.clientWidth
和 document.body.clientHeight
取得相同信息。对于混杂模式下的 Chrome,则无论通过 document.documentElement
还是 document.body
中的 clientHeight 和 clientWidth 属性,都可以取得视口的大小。
虽然最终无法取得确定浏览器窗口本身的大小,但却可以取得页面视口的大小:
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; } }
代码解释:
1.通过检查 document.compatMode == "CSS1Compat"
来确定页面是否处于标准模式。
对于移动设备,window.innerWidth
和 window.innerHeight
保存着可见视口,也就是屏幕上可见页面区域的大小。移动 IE 浏览器不支持这些属性,但通过 document.documentElement.clientWidth
和 document.documentElement.clientHeight
提供了相同的信息。随着页面的缩放,这些值也会相应变化。在其他移动浏览器中,document.documentElement
度量的是布局视口,即渲染后页面的实际大小(与可见视口不同,可见视口只是整个页面中的一小部分。)移动 IE 浏览器把布局视口的信息保存在 document.body.clientWidth
和 document.body.clientHeight
中。这些值不会随着页面缩放变化。
由于与桌面浏览器间存在这些差异,最好先检测一下用户是否在使用移动设备,然后再决定使用哪个属性。
调整浏览器窗口大小的方法:
1.resizeTo()
:接收浏览器窗口的新宽度和新高度;
//调整到100*100window.resizeTo(100,100);
2.resizeBy()
:接收新窗口与原窗口的宽度和高度之差。
//调整到200*150window.resizeBy(100,50);
- BOM——window对象之窗口大小
- JavaScript高级程序设计之BOM之window 对象之窗口大小 第8.1.4讲笔记
- BOM(一)--window对象、控制窗口
- JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记
- 浏览器对象模型BOM之window对象
- BOM:窗口位置、页面视口大小、window.open
- JavaScript学习4:BOM之window对象
- JavaScript之window对象(BOM)
- JavaScript高级程序设计之BOM之window 对象之窗口关系及框架 第8.1.2讲笔记
- JavaScript高级程序设计之BOM之window 对象之导航和打开窗口 第8.1.5讲笔记
- BOM-Window 对象
- js-----BOM/window对象
- JavaScript BOM对象(Window)
- BOM编程、window对象
- BOM.window对象
- BOM--window对象
- AngularJS之$window窗口对象
- javascript之BOM对象(一window对象)
- NSIS脚本的ReadRegStr函数的一个bug
- 水光半导体于2017 CES展示全方位通讯网络、多媒体及消费性电子芯片解决方案
- 在myeclipse中新建Maven框架的web项目
- 树的同构
- 【浏览器】Chrome安装.crx扩展名的离线Chrome插件
- BOM——window对象之窗口大小
- 欢迎使用CSDN-markdown编辑器
- C++中endl、“\n”和‘\n’的区别
- 微服务和集群搭建
- 移动Web开发基础-flex弹性布局(兼容写法)
- 服务器--谈谈实践中遇见的问题和成长
- H264 RTP传输学习2
- 自定义view绘制太极图
- Missing artifact jdk.tools:jdk.tools:jar:1.7