面對設備欺騙，如何從JS/CSS準確檢測DPI/PPI？

從JS/CSS 偵測系統DPI/PPI

背景

在具有不同DPI/PPI 設定的裝置之間保持一致的使用者體驗至關重要適用於生成高解析度影像的現代應用程式。然而，準確檢測設備的 DPI/PPI 存在挑戰，因為傳統方法可能無法提供可靠的結果。

裝置說謊：錯誤的 96ppi 讀數

您使用具有固定「的元素的初始方法CSS 中的 1in" 寬度並檢查其 offsetWidth 似乎是合理的。然而，眾所周知，iPhone 會誤報其 PPI，給出 96ppi 的誤差值。這種錯誤的讀數使該方法不可靠。

替代方法：裝置顯示尺寸

另一個潛在的解決方案是擷取裝置顯示尺寸（以英吋為單位）並將其除以寬度（以像素為單位）。然而，在 JS/CSS 中存取這些尺寸並不簡單。

解決方案：DevicePixelRatio

解決方案：DevicePixelRatio

幸運的是，有一個可靠的方法來獲取設備DPI/PPI：
使用window.devicePixelatio：
2. 此屬性提供裝置螢幕上的像素與CSS 像素的比率。
建立測試元素：
3. 使用下列指令建立不可見元素CSS 中的高度和寬度均為 1 英吋。
擷取顯示解析度：

透過將元素的偏移寬度和高度乘以 devicePixelRatio 來計算 DPI/PPI。

<code class="javascript">const testDiv = document.createElement('div');
testDiv.style.height = '1in';
testDiv.style.left = '-100%';
testDiv.style.position = 'absolute';
testDiv.style.top = '-100%';
testDiv.style.width = '1in';
document.body.appendChild(testDiv);

const DPI_X = testDiv.offsetWidth * window.devicePixelRatio;
const DPI_Y = testDiv.offsetHeight * window.devicePixelRatio;

console.log(DPI_X, DPI_Y);</code>

此方法可在各種設備上提供準確的 DPI/PPI 讀數，包括那些使用傳統方法可能誤報 PPI 的設備。

以上是面對設備欺騙，如何從JS/CSS準確檢測DPI/PPI？的詳細內容。更多資訊請關注PHP中文網其他相關文章！