如何使用JavaScript準確檢測設備DPI/PPI？

JS/CSS 中的裝置 DPI/PPI 偵測

確定裝置的顯示解析度對於產生適當尺寸的影像至關重要。然而，直接從 JavaScript 或 CSS 檢測系統 DPI 或 PPI 會帶來挑戰。

一種建議的方法是在 CSS 中建立一個寬度設定為「1in」的元素並測量其 offsetWidth。然而，這種方法在 iPhone 等裝置上被證明是不可靠的，iPhone 會錯誤地報告 DPI 為 96。

另一種策略是取得顯示器的尺寸（以英吋為單位）並將其除以寬度（以像素為單位）。實作此方法需要執行以下步驟：

1. 建立尺寸為 1x1 英吋的不可見元素。
2. 將元素放置在螢幕外以防止幹擾佈局。
3. 使用 window.devicePixelRatio 計算裝置像素比（DPR）或預設為1.
4. 將元素的 offsetWidth 和 offsetHeight 乘以 DPR 來決定水平和垂直 DPI。

以下是示範此方法的 JavaScript 程式碼片段：

<div>

這種方法可以準確地擷取裝置的 DPI/PPI，從而可以精確產生裝置特定的圖片。

以上是如何使用JavaScript準確檢測設備DPI/PPI？的詳細內容。更多資訊請關注PHP中文網其他相關文章！