瀏覽器資訊查看工具
線上瀏覽器資訊檢測工具，即時查看螢幕解析度、瀏覽器視窗尺寸與位置、Document 尺寸、可視區域與滾動條位置、頁面可見性、設備類型（PC/行動端/平板）以及瀏覽器型號與版本號。
Live preview⤢ Fullscreen
工具簡介
一款輕量的瀏覽器資訊查看工具，無需安裝任何外掛即可即時獲取當前瀏覽器的各項環境參數。適合前端開發除錯、瀏覽器相容性測試、遠端協助診斷等場景。
資訊項
| 分類 | 資訊項 | 說明 |
|---|---|---|
| 🖥️ 螢幕解析度 | 螢幕寬 × 高 | screen.width / screen.height |
| 可用寬 × 高 | screen.availWidth / screen.availHeight（排除工具列） | |
| 顏色深度 | screen.colorDepth，通常為 24 bit 或 32 bit | |
| 像素比 (DPR) | window.devicePixelRatio，Retina 螢幕通常為 2 或 3 | |
| 📐 瀏覽器視窗 | 視窗寬 × 高 | window.innerWidth / window.innerHeight |
| 左頂點 X / Y | window.screenX / window.screenY，視窗左上角在螢幕上的座標 | |
| 外寬 × 高 | window.outerWidth / window.outerHeight，含瀏覽器邊框和工具列 | |
| 📄 Document 尺寸 | document 寬 × 高 | document.documentElement.scrollWidth / scrollHeight |
| body 寬 × 高 | document.body.scrollWidth / scrollHeight | |
| 估算標題列 + 工具列 | 透過 outerHeight - innerHeight 按比例估算頂部非內容區高度 | |
| 估算底部狀態列 | 透過 outerHeight - innerHeight 按比例估算底部非內容區高度 | |
| 👁️ 可視區域 & 滾動 | 可視區寬 × 高 | 同 window.innerWidth / innerHeight |
| 滾動條位置 X / Y | window.scrollX / window.scrollY | |
| 頁面是否可見 | document.hidden，切換分頁時自動更新 | |
| 💻 系統資訊 | 設備類型 | 自動識別 PC / 平板 (Tablet) / 行動端 (Mobile) |
| 作業系統 | 檢測 Windows / macOS / Linux / Android / iOS 及版本號 | |
| User-Agent | 完整的 navigator.userAgent 字串 | |
| 🌐 瀏覽器資訊 | 瀏覽器名稱 | 自動識別 Chrome / Firefox / Edge / Safari / Opera / IE |
| 版本號 | 對應瀏覽器的詳細版本號 | |
| 渲染引擎 | Blink / WebKit / Gecko / Trident | |
| 語言 | navigator.language | |
| Cookie 啟用 | navigator.cookieEnabled |
核心功能
| 功能 | 說明 |
|---|---|
| 即時刷新 | 視窗大小變化、滾動、頁面可見性變化時自動更新資料 |
| 手動刷新 | 點擊「立即刷新」按鈕強制更新所有資訊 |
| 一鍵複製 | 點擊「複製全部資訊」將完整報告複製到剪貼簿 |
| 自動刷新開關 | 可關閉自動刷新，手動控制更新時機 |
| 深色模式 | 支援淺色/深色主題切換 |
使用方法
- 開啟頁面即自動顯示當前瀏覽器的全部環境資訊
- 調整瀏覽器視窗大小或滾動頁面，資料自動更新
- 點擊「複製全部資訊」取得格式化文字報告，方便分享或記錄