面对设备欺骗，如何从JS/CSS中准确检测DPI/PPI？

从 JS/CSS 检测系统 DPI/PPI

背景

在具有不同 DPI/PPI 设置的设备之间保持一致的用户体验至关重要适用于生成高分辨率图像的现代应用程序。然而，准确检测设备的 DPI/PPI 存在挑战，因为传统方法可能无法提供可靠的结果。

设备说谎：错误的 96ppi 读数

您使用具有固定“的元素的初始方法CSS 中的 1in" 宽度并检查其 offsetWidth 似乎是合理的。然而，众所周知，iPhone 会误报其 PPI，给出 96ppi 的错误值。这种错误的读数使该方法不可靠。

替代方法：设备显示尺寸

另一个潜在的解决方案是检索设备显示尺寸（以英寸为单位）并将其除以宽度（以像素为单位）。然而，在 JS/CSS 中访问这些尺寸并不简单。

解决方案：DevicePixelRatio

幸运的是，有一个可靠的方法来获取设备 DPI/PPI：

1. 使用 window.devicePixelRatio： 此属性提供设备屏幕上的像素与 CSS 像素的比率。
2. 创建测试元素： 使用以下命令创建不可见元素CSS 中的高度和宽度均为 1 英寸。
3. 检索显示分辨率：通过将元素的偏移宽度和高度乘以 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中文网其他相关文章！