博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS获取各种浏览器窗口大小的方法
阅读量:5958 次
发布时间:2019-06-19

本文共 2838 字,大约阅读时间需要 9 分钟。

常用:

JS 获取浏览器窗口大小

// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; // 通过深入 Document 内部对 body 进行检测,获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; }

详细:

关于获取各种浏览器可见窗口大小: 

function getInfo() { var s = ""; s = " 网页可见区域宽:" document.body.clientWidth; s = " 网页可见区域高:" document.body.clientHeight; s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)"; s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)"; s = " 网页正文全文宽:" document.body.scrollWidth; s = " 网页正文全文高:" document.body.scrollHeight; s = " 网页被卷去的高(ff):" document.body.scrollTop; s = " 网页被卷去的高(ie):" document.documentElement.scrollTop; s = " 网页被卷去的左:" document.body.scrollLeft; s = " 网页正文部分上:" window.screenTop; s = " 网页正文部分左:" window.screenLeft; s = " 屏幕分辨率的高:" window.screen.height; s = " 屏幕分辨率的宽:" window.screen.width; s = " 屏幕可用工作区高度:" window.screen.availHeight; s = " 屏幕可用工作区宽度:" window.screen.availWidth;s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色"; s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸"; //alert (s); } getInfo();

在我本地测试当中: 

在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得,很简单,很方便。 
而在公司项目当中:

Opera仍然使用 

document.body.clientWidth 
document.body.clientHeight

可是IE和FireFox则使用 

document.documentElement.clientWidth 
document.documentElement.clientHeight

原来是W3C的标准在作怪啊 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话 在IE中: 

document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中: 

document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
 

在Opera中: 

document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
而如果没有定义W3C的标准,则

IE为: 

document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0

FireFox为: 

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为: 

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

转载地址:http://fluax.baihongyu.com/

你可能感兴趣的文章
Objective-C:运行时runtime
查看>>
c++ 基于wincrypt的DES CBC模式加解密
查看>>
[Python学习] 模块三.基本字符串
查看>>
android 项目中出现红色感叹号的解决方法
查看>>
Android硬件加速
查看>>
RabbitMQ (两)工作队列
查看>>
[GIT] Git 工作流程(Git flow, Github flow flow, Git lab flow)
查看>>
Jquery高亮显示文本中重要的关键字
查看>>
对于表列数据类型选择的一点思考对于表列数据类型选择的一点思考
查看>>
如何为编程爱好者设计一款好玩的智能硬件(二)——别人是如何设计硬件积木的!...
查看>>
SQL server 2005高可用性之----数据库镜像
查看>>
轻、快、好、免费的开发工具
查看>>
[LeetCode] Delete Duplicate Emails 删除重复邮箱
查看>>
fullCalendar动态获取数据
查看>>
Android 服务端开发之开发环境配置
查看>>
如何建立自己的私有云存储
查看>>
CPA,CPS,CPC,CPM的特点
查看>>
Phonegap Online和Offline
查看>>
软件设计
查看>>
Open XML应用安全(4)文档校验
查看>>