Screen Resolution、Viewport 與 DPR 的差異
Screen Resolution 描述整個顯示器；瀏覽器基於隱私、縮放與平台差異，通常提供的是 CSS 像素尺寸。Viewport 是網頁實際可用的內容區，會隨視窗、工具列或分割畫面改變。Device Pixel Ratio（DPR）則表示一個 CSS 像素對應多少裝置像素。
將 Screen CSS 寬高乘上 DPR 可得到常用的實體像素估算，但不保證等同面板原生規格。作業系統顯示縮放、瀏覽器縮放、外接螢幕與隱私保護都可能改變結果。前端開發應以 Viewport 建立版面，以 DPR 選擇清晰圖像，而不是用解析度猜測裝置型號。
如何使用檢測結果？
- 用 Viewport 測試響應式排版與 Media Query。
- 用 DPR 決定 Canvas 輸出倍率或高密度圖片資源。
- 用觸控支援改善操作目標，但不要把它當作手機的唯一判斷。
- 用 Color Depth 了解瀏覽器回報的色彩位元深度。
常見問題
為什麼實體解析度標示為估算？
Web API 不一定揭露面板原生像素，工具只能使用 screen 尺寸乘上 DPR 推估。
DPR 2 代表什麼？
通常表示一個 CSS 像素在寬與高方向各使用兩個裝置像素呈現。
Viewport 與 Screen 為何不同？
Viewport 只包含網頁內容區；Screen 是整個顯示器的 CSS 尺寸。
瀏覽器縮放會影響結果嗎？
會，縮放可能改變 CSS 像素與 DPR 的回報，因此除錯時應同時記錄縮放設定。
下載檔案會包含隱私資料嗎？
只包含頁面顯示的螢幕、色彩與觸控能力，不包含帳號、位置或檔案內容。