点击代码即可快速复制
| 代码 | 简介 | 值 |
|---|---|---|
| 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 等視窗層級參數。
是否支援複製程式碼後直接使用?
支援,所有檢測程式碼都可一鍵複製,適合用於頁面除錯、裝置適配腳本撰寫等情境。