在线JS设备屏幕参数检测工具

点击代码即可快速复制

代码 简介
window.innerWidth 网页缩放后可用宽度
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 屏幕可用工作区宽度
window.devicePixelRatio 屏幕缩放因子
window.screen.width * window.devicePixelRatio 屏幕逻辑分辨率

由于在移动设备中,设备密度各不相同,使用以下下meta标签限制浏览器缩放,这将帮我们解决了很多问题,我们只要按照设备物理像素的大小来进行开发就行了。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在线JS屏幕参数检测工具介绍

在线JS屏幕参数检测工具,支持通过JavaScript实时获取当前浏览器窗口的宽度、高度、设备分辨率等详细参数。

用户可直观查看页面视图与设备环境,支持一键复制检测用JS代码,帮助开发者高效调试响应式页面、适配不同设备分辨率。

主要功能包括:实时显示浏览器窗口宽度与高度,获取屏幕分辨率、可视区域大小、设备像素比等,支持一键复制常用JS检测代码。

如何使用JS设备屏幕检测工具?

第一步:打开网页,查看页面中展示的各种设备与浏览器尺寸数据。

第二步:点击JS代码,可快速获取用于检测的JavaScript语句。

第三步:将复制的JS代码粘贴到开发项目中,辅助进行尺寸判断与调试。

JS获取浏览器尺寸常见问题 FAQ

这个工具支持哪些设备?

支持所有现代浏览器的PC、Mac、平板、手机等多种终端,均可检测JS环境下的屏幕参数。

可以获取用户真实设备分辨率吗?

可以获取用户设备的 screen.width 和 screen.height,同时提供 window.innerWidth 和 window.innerHeight 等窗口级别参数。

是否支持复制代码直接使用?

支持,所有检测代码都可以一键复制,适用于页面调试、适配脚本编写等场景。