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

最新推荐文章于 2024-07-01 02:25:02 发布
最新推荐文章于 2024-07-01 02:25:02 发布
阅读量493 收藏
点赞数
分类专栏： 网页制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloliuhai/article/details/24029247
版权

关于获取各种浏览器可见窗口大小的一点点研究
<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高）



网页可见区域宽： document.body.clientWidth 
网页可见区域高： document.body.clientHeight 
网页可见区域宽： document.body.offsetWidth (包括边线的宽) 
网页可见区域高： document.body.offsetHeight (包括边线的高) 
网页正文全文宽： document.body.scrollWidth 
网页正文全文高： document.body.scrollHeight 
网页被卷去的高： document.body.scrollTop 
网页被卷去的左： document.body.scrollLeft 
网页正文部分上： window.screenTop 
网页正文部分左： window.screenLeft 
屏幕分辨率的高： window.screen.height 
屏幕分辨率的宽： window.screen.width 
屏幕可用工作区高度： window.screen.availHeight 
屏幕可用工作区宽度： window.screen.availWidth 


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 


hello刘海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打开我的收藏夹 -- Python篇
看，未来的博客
03-24 8214
文章目录python基础部分Python打包exe文件pyinstallerPython爬虫Scrapy框架接着，建立工程文件：创建爬虫文件：定义一个容器，保存爬取的数据。重新编写爬虫文件MySpider.py：运行scrapy框架：使用Pipeline处理数据：selenium元素操作：WebElement 接口常用方法：鼠标操作：键盘操作：（这个比较重要啦）多表单切换：多窗口切换警告框处理上传文件窗口截图！！！（这功能我一直想要）数据分析pandas数据分析项目：马大师数据可视化pyechart 之我.
Qt开发经验总结
草上爬的博客
12-02 8104
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
js如何获取设备dpi
weixin_44283589的博客
07-13 2759
这些属性在IE浏览器中可用，可以用来获取设备的物理像素和逻辑像素的比例。通过计算比例并乘以默认的 96dpi，可以得到设备的 DPI 值。通过将默认的 96dpi 乘以这个比例，可以得到设备的 DPI 值。请注意，不同浏览器可能使用不同的属性或方法来获取 DPI 值。在实际应用中，最好根据目标浏览器进行测试和适配，或者使用第三方库来获取准确的 DPI 值。要获取设备的 DPI（每英寸像素数），目前没有一种方法能够兼容所有浏览器。返回的结果是设备的 DPI 值，并将其打印到控制台上。
网页 js 获取DPI pxTomm
weixin_30763455的博客
06-30 356
//获取DPI function js_getDPI() { var arrDPI = new Array(); if ( window.screen.deviceXDPI != undefined ) { arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.sc...
屏幕缩放比例
SASAEDFDASF的博客
04-24 164
屏幕缩放比例
获取浏览器缩放百分比
weixin_45878947的博客
08-30 884
varratio=0; varscreen=window.screen; varua=navigator.userAgent.toLowerCase(); if(window.devicePixelRatio!==undefined) { ratio=window.devicePixelRatio; console.log('ratio',ratio) } elseif(~ua.indexOf...
javascript检测网页缩放演示代码
Purpleendurer@CSDN
09-15 1607
在网上冲浪，有时在打某个网站时，会提示你的浏览器显示比例不是100%，建议你将浏览器显示比例恢复为100%，以便获得最佳显示效果。那么这些网站是如何检测你的浏览器显示比例的呢？
获取计算机显示屏高度,CSS 使用calc()获取当前可视屏幕高度
weixin_36026440的博客
07-26 2034
先了解一下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 909
1. Flink简介1.1 Flink的起源和设计理念flink项目的核心目标：数据流上的有状态计算（Stateful Computations over Data Streams)。时间驱动：来一个事件处理一个事件；流处理的流水线；流&批数据分析具体定位是：Apache Flink 是一个框架和分布式处理引擎，用于对无界和有界数据流进行有状态计算。Flink 被设计在所有常见的集群环境中运行，以内存执行速度和任意规模来执行计算。1.2 Flink的应用。
javascript 实现像素px与毫米mm的转换
lwpkjio的博客
02-15 4648
function unitConversion() {     /**      * 获取DPI      * @returns {Array}      */     this.conversion_getDPI =function () {         var arrDPI = new Array;         if (window.screen.deviceXDPI) {      ...
javascript获得屏幕的DPI
热门推荐
xqdak的专栏
04-06 1万+
function js_getDPI() {    var arrDPI = new Array();    if (window.screen.deviceXDPI != undefined) {        arrDPI[0] = window.screen.deviceXDPI;        arrDPI[1] = window.screen.deviceYDPI;    }    el
Js/Jquery获取网页屏幕可见区域高度
weixin_30877227的博客
03-07 141
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clientHeight ==> BODY对象高度 3 document.documentElement.clientWidth ==> 可见区域宽度 4 documen...
毫米和像素怎么换算_像素（px）与毫米（mm）间的转换
weixin_35700754的博客
12-31 4262
像素(px)与毫米(mm)间的转换//获取DPI，图像每英寸长度内的像素点数functiongetDPI(){vararrDPI=newArray;if(window.screen.deviceXDPI){arrDPI[0]=window.screen.deviceXDPI;arrDPI[1]=window.screen.deviceYDPI;}else{vartmp...
html获取屏幕的高度,js如何获取屏幕高度
weixin_28733651的博客
06-08 1010
使用document对象关于窗口的一些属性，获取屏幕高度等屏幕尺寸信息。要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在netscape下需要使用window的属性；在ie下需 要深入document内部对body进行检测；在dom环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。window对象的innerwidth属性包含当前窗口的内部宽度。...
【Javascript客户端】Screen对象：得到有关客户端显示屏幕的信息
王晓斌的专栏
01-07 3957
Screen 对象 JavaScript Screen 对象包含了有关客户端显示屏幕的相关信息。JavaScript 程序可以利用这些信息来优化显示输出，以达到更精准的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像等。 提示：Screen 对象虽然没有明确的相关标准，但所有浏览器都支持该对象。 Screen 对象属性 Screen 对象的属
Javascript 获取屏幕DPI
固破的专栏
10-11 1万+
//获取DPI function js_getDPI() { var arrDPI = new Array(); if ( window.screen.deviceXDPI != undefined ) { arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.screen.deviceY...
js 获取屏幕和浏览器信息
汪成龙
02-12 843
window screenTop 网页正文部分上 screenLeft 网页正文部分左 screen height 屏幕分辨率的高 width 屏幕分辨率的宽 availHeight 屏幕可用工作区高度 availWidth 屏幕可用工作区宽度..
js获取屏幕（设备）宽高
Preserve
07-20 9138
script language="javascript"> var h = ""; h += " 网页可见区域宽："+ document.body.clientWidth+"\n"; h += " 网页可见区域高："+ document.body.clientHeight+"\n"; h += " 网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的
兼容所有浏览器的JavaScript获取窗口大小代码
"这篇文档提供了一段JavaScript代码，用于获取浏览器窗口的大小并兼容所有浏览器。这段代码包括了检查和处理不同浏览器对于窗口大小获取方式的差异，以及获取窗口位置的方法，特别关注了Internet Explorer、Safari和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值