关于获取各种浏览器可见窗口大小的一点点研究

最新推荐文章于 2024-09-20 16:06:21 发布
最新推荐文章于 2024-09-20 16:06:21 发布
阅读量38 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/xiyou110/archive/2010/06/07/1753194.html
版权
<script>
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();
</script>
在我本地测试当中：
在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高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。(Z)

转载于:https://www.cnblogs.com/xiyou110/archive/2010/06/07/1753194.html

weixin_34005042
关注
打开我的收藏夹 -- Python篇
看，未来的博客
03-24 8227
文章目录python基础部分Python打包exe文件pyinstallerPython爬虫Scrapy框架接着，建立工程文件：创建爬虫文件：定义一个容器，保存爬取的数据。重新编写爬虫文件MySpider.py：运行scrapy框架：使用Pipeline处理数据：selenium元素操作：WebElement 接口常用方法：鼠标操作：键盘操作：（这个比较重要啦）多表单切换：多窗口切换警告框处理上传文件窗口截图！！！（这功能我一直想要）数据分析pandas数据分析项目：马大师数据可视化pyechart 之我.
Qt开发经验总结
草上爬的博客
12-02 8320
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Js关于获取各种浏览器可见窗口大小的一点点研究
05-13 52
在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight即可获得，很简单，很方便。 而在公司项目当中：Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 d...
关于获取各种浏览器可见窗口大小。
di0808的博客
11-02 59
关于获取各种浏览器可见窗口大小的一点点研究。 在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 document.body.clientWidth ...
获取各种浏览器可见窗口大小
wang_liuyong的博客
07-26 747
关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offs...
关于获取各种浏览器可见窗口大小的一点点研究
hubowei的专栏
12-14 322
关于获取各种浏览器可见窗口大小的一点点研究 function getinfo() {     var s = "";     s += " 网页可见区域宽："+ document.body.clientwidth;     s += " 网页可见区域高："+ document.body.clientheight;     s += " 网页可见区域宽："+ document.bod
获取计算机显示屏高度,CSS 使用calc()获取当前可视屏幕高度
weixin_36026440的博客
07-26 2048
先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；ex依赖于英文字母小 x 的高度ch数字 0 的宽度rem根元素(html)的 font-sizevwviewpoint width，视窗...
关于测试中常用到的一些方法、策略总结
热门推荐
Loadrunn的专栏
04-18 1万+
一些常用模块的测试用例 1、登录　　2、添加　　3、查询　　4、删除 1、登录 ①用户名和密码都符合要求（格式上的要求） ②用户名和密码都不符合要求（格式上的要求） ③用户名符合要求，密码不符合要求（格式上的要求） ④密码符合要求，用户名不符合要求（格式上的要求） ⑤用户名或密码为空 ⑥数据库中不存在的用户名，不存在的密码 ⑦数据库中存在的用户名，错误的密码 ⑧数据库中不存在的
[Flink]一、Flink1.13
weixin_44428807的博客
07-01 954
1. Flink简介1.1 Flink的起源和设计理念flink项目的核心目标：数据流上的有状态计算（Stateful Computations over Data Streams)。时间驱动：来一个事件处理一个事件；流处理的流水线；流&批数据分析具体定位是：Apache Flink 是一个框架和分布式处理引擎，用于对无界和有界数据流进行有状态计算。Flink 被设计在所有常见的集群环境中运行，以内存执行速度和任意规模来执行计算。1.2 Flink的应用。
XHTML学习
大河之犬的博客
09-20 345
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
基于java的共享汽车管理系统的开题报告2.docx
09-25
基于java的共享汽车管理系统的开题报告2.docx
基于SpringBoot的ChongyouLostandfound失物招领网站设计源码
09-25
该源码是一款基于SpringBoot框架构建的重邮失物招领网站，包含了250个文件，涵盖101个XML配置文件、44个Java源代码文件、26个HTML页面文件、20个JavaScript脚本文件、12个CSS样式文件、12个图片文件（JPG格式）、10个属性文件、5个ICO图标文件、5个PNG图片文件、4个SVG矢量图形文件。项目采用Java、HTML、JavaScript和CSS等多种语言实现，功能完善，界面友好。
小白学JavaScript的第六天
09-25
小白学JavaScript的第六天
源享科技STM32学习开发板芯片资料74HC595
09-25
源享科技STM32学习开发板芯片资料74HC595
基于C++和C语言的邻居Toyota日落追逐故事设计源码
09-25
本项目是一款以C++和C语言为基础开发的“Toyota日落追逐故事”游戏源码，包含68个文件，其中包括30个可执行文件、29个C++源文件、6个文档文件、2个C源文件以及1个文本文件。游戏讲述了一个主人公驾驶邻居家的Toyota汽车追逐日落的冒险故事，其中充满了惊险与刺激。
CEH2310-VB一种N-Channel沟道SOT23-6封装MOS管
09-25
30V;6A;RDS(ON)=30mΩ@VGS=10V;VGS=20V;Vth=1.2V
基于STM32F407，使用DFS算法实现最短迷宫路径检索(毕设&课设&实训&大作业&竞赛&项目)
最新发布
09-25
基于STM32F407，使用DFS算法实现最短迷宫路径检索，分为三种模式：1.DEBUG模式，2. 训练模式，3. 主程序模式 ，DEBUG模式主要分析bug，测量必要数据，训练模式用于DFS算法训练最短路径，并将最短路径以链表形式存储Flash， 主程序模式从Flash中….zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
JavaScript全面解析：获取浏览器窗口和元素尺寸
"这篇文章主要介绍了如何使用JavaScript获取浏览器窗口的各种尺寸信息，包括宽度、高度以及滚动条相关的属性。" 在JavaScript中，获取浏览器窗口的大小是开发者经常需要进行的操作，这些信息对于页面布局和交互设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值