点击代码即可快速复制
代码 | 简介 | 值 |
---|---|---|
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 等窗口级别参数。
是否支持复制代码直接使用?
支持,所有检测代码都可以一键复制,适用于页面调试、适配脚本编写等场景。