屏幕參數查看器

屏幕參數查看器 — 實時檢測你的設備屏幕信息

屏幕參數查看器是一款運行在瀏覽器中的在線工具，無需安裝任何軟件，打開即可實時查看當前設備的完整屏幕與視口參數。無論你是前端開發者、UI/UX 設計師，還是普通用戶，都可以通過本工具快速瞭解屏幕相關的技術指標。

核心功能

• 屏幕分辨率：顯示設備物理像素的寬高，即屏幕的實際分辨率（如 1920×1080）。
• 視口大小：顯示瀏覽器當前可視區域的 CSS 像素寬高，隨窗口大小實時變化。
• 可用屏幕尺寸：排除操作系統任務欄後的實際可用屏幕區域。
• 設備像素比（DPR）：物理像素與 CSS 像素的比值，用於判斷是否爲視網膜屏/高分辨率屏。
• 文檔尺寸與滾動偏移：完整頁面的寬高，以及當前水平/垂直滾動位置。
• 瀏覽器縮放級別：當前瀏覽器頁面的縮放百分比。
• 色彩深度與像素深度：屏幕每像素的色彩位數，判斷是否支持真彩色或深色域。
• 色域支持：檢測當前屏幕是否支持 sRGB、P3 Wide、Rec.2020 廣色域。
• 深色模式：檢測操作系統當前是否啓用了深色（Dark Mode）顏色方案。
• HDR 支持：檢測屏幕是否支持高動態範圍（High Dynamic Range）顯示。
• 屏幕方向：實時顯示設備當前是橫向（Landscape）還是縱向（Portrait），並顯示旋轉角度。
• 設備類型識別：自動判斷當前設備爲手機、平板、桌面端或大屏顯示器。

適用場景

• 前端開發調試：快速確認視口尺寸、DPR、縮放級別，輔助響應式佈局開發與斷點調試。
• UI/UX 設計參考：瞭解真實用戶設備的屏幕參數，爲設計稿尺寸和適配方案提供數據支撐。
• 設備信息覈查：在購買或使用新設備時，快速驗證屏幕規格是否與標稱參數一致。
• 跨端兼容測試：在不同設備上打開本工具，對比各端屏幕參數差異，輔助多端適配工作。
• 廣色域與 HDR 檢測：判斷設備是否具備 P3 寬色域或 HDR 顯示能力，爲內容創作者和攝影師提供參考。

數據實時更新

本工具的所有參數均在瀏覽器端實時計算，無需聯網請求。當你拖動瀏覽器窗口、調整頁面縮放、旋轉設備屏幕時，數據會立即自動更新，無需手動刷新頁面。

常見問題 FAQ

Q：屏幕分辨率和視口大小有什麼區別？

屏幕分辨率是設備硬件的物理像素數（固定不變），視口大小是瀏覽器當前可視區域的 CSS 像素數（會隨窗口大小和縮放變化）。在高 DPR 設備上，物理像素遠多於 CSS 像素。

Q：設備像素比（DPR）是什麼意思？

DPR（Device Pixel Ratio）是物理像素與 CSS 像素的比值。DPR=2 表示每個 CSS 像素由 2×2=4 個物理像素渲染，即通常所說的"視網膜屏"或"HiDPI 屏"，圖像和文字在這類屏幕上顯示更加清晰細膩。

Q：爲什麼檢測到的瀏覽器縮放不是 100%？

瀏覽器縮放級別是通過 outerWidth / innerWidth 計算得出的估算值。如果你在操作系統層面修改了顯示縮放比例，或者瀏覽器本身設置了默認縮放，都可能導致檢測值不爲 100%。

Q：P3 Wide 和 sRGB 色域有何不同？

sRGB 是最常見的標準色域，覆蓋約 33% 的可見光顏色範圍；P3 Wide（DCI-P3）覆蓋範圍更廣，約爲 sRGB 的 1.25 倍，常見於蘋果、三星等高端設備屏幕，能夠顯示更鮮豔飽和的色彩。

Q：深色模式檢測準確嗎？

本工具通過 CSS 媒體查詢 prefers-color-scheme: dark 讀取操作系統的顏色方案設置，與瀏覽器自身的深色模式開關保持一致，檢測結果準確可靠。