js获取屏幕(设备)宽高

<script language="javascript">
var h = "";
h += " 网页可见区域宽:"+ document.body.clientWidth+"\n";
h += " 网页可见区域高:"+ document.body.clientHeight+"\n";
h += " 网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"\n";
h += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"+"\n";
h += " 网页正文全文宽:"+ document.body.scrollWidth+"\n";
h += " 网页正文全文高:"+ document.body.scrollHeight+"\n";
h += " 网页被卷去的上:"+ document.body.scrollTop+"\n";
h += " 网页被卷去的左:"+ document.body.scrollLeft+"\n";
h += " 网页正文部分上:"+ window.screenTop+"\n";
h += " 网页正文部分左:"+ window.screenLeft+"\n";
h += " 屏幕分辨率的宽:"+ window.screen.width+"\n";
h += " 屏幕分辨率的高:"+ window.screen.height+"\n";
h += " 屏幕可用工作区宽度:"+ window.screen.availWidth+"\n";
h += " 屏幕可用工作区高度:"+ window.screen.availHeight+"\n";
h += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
h += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";
alert(h);
</script>
在JavaScript中,可以通过`window.screen`对象获取计算机屏幕度和度信息。以下是常用的方法: - 使用`window.screen.width`和`window.screen.height`可以获取屏幕的分辨率,即屏幕的最大像素数[^2]。 ```javascript var screenWidth = window.screen.width; var screenHeight = window.screen.height; console.log("屏幕分辨率为: " + screenWidth + "x" + screenHeight); ``` - 如果需要获取不包含任务栏等占位后的可用空间,可以通过`window.screen.availWidth`和`window.screen.availHeight`属性获取[^2]。 ```javascript var availWidth = window.screen.availWidth; var availHeight = window.screen.availHeight; console.log("屏幕可用工作区尺寸为: " + availWidth + "x" + availHeight); ``` 此外,还可以通过以下方式获取与网页相关的尺寸信息: - `document.body.clientWidth` 和 `document.body.clientHeight` 可以获取网页可见区域的度和度[^5]。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 可以获取包括边线在内的网页可见区域的度和度。 如果希望进一步计算设备的物理像素分辨率与CSS像素分辨率之间的比例,可以使用`window.devicePixelRatio`属性来辅助[^4]。 ```javascript var devicePixelRatio = window.devicePixelRatio || 1; var physicalScreenWidth = window.screen.width / devicePixelRatio; var physicalScreenHeight = window.screen.height / devicePixelRatio; console.log("物理屏幕度: " + physicalScreenWidth); console.log("物理屏幕度: " + physicalScreenHeight); ``` ### 屏幕刷新率的测量 虽然JavaScript没有直接的方法可以获取屏幕的刷新率,但可以通过`requestAnimationFrame`函数近似计算[^4]。 ```javascript let lastTime = 0; let refreshRate = 0; function measureRefreshRate() { requestAnimationFrame(function(time) { if (lastTime > 0) { refreshRate = 1000 / (time - lastTime); console.log('屏幕刷新率大约是:', refreshRate, 'Hz'); } lastTime = time; measureRefreshRate(); }); } // 开始测量 measureRefreshRate(); ``` 这些方法可以帮助开发者更好地了解用户的显示环境,并据此调整网页布局或性能优化策略。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值