写个方法获取屏幕的DPI

获取屏幕的 DPI 方法

在 Web 开发中，有时我们需要获取屏幕的 DPI（每英寸点数）来做一些适配，尤其是在处理高清显示屏时。DPI 可以影响图像的显示质量和布局。下面介绍几种获取屏幕 DPI 的方法。

1. 使用 window.devicePixelRatio

window.devicePixelRatio 是一个返回当前显示设备的像素比的属性。它可以帮助我们计算 DPI。

function getDPI() {
    // 获取设备的像素比
    const devicePixelRatio = window.devicePixelRatio;

    // 计算 DPI
    const dpi = 96 * devicePixelRatio; // 96 是标准 DPI
    return dpi;
}

console.log(`当前屏幕 DPI: ${getDPI()}`);

2. 使用 Canvas

另一种获取 DPI 的方法是通过 Canvas 画布。我们可以通过绘制一个已知大小的图形来计算 DPI。

function getDPIWithCanvas() {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // 设置已知的物理尺寸（以英寸为单位）
    const inch = 96; // 1 英寸 = 96 像素

    // 绘制一个 1 英寸的方形
    canvas.width = inch;
    canvas.height = inch;
    context.fillStyle = 'blue';
    context.fillRect(0, 0, inch, inch);

    // 获取绘制后的像素信息
    const pixelWidth = context.getImageData(0, 0, inch, inch).data.length / 4;

    // 计算 DPI
    const dpi = Math.sqrt(pixelWidth) * (inch / 1); // 计算 DPI
    return dpi;
}

console.log(`当前屏幕 DPI (Canvas): ${getDPIWithCanvas()}`);

3. 使用 CSS 像素和物理像素

通过比较 CSS 像素和物理像素的大小，也可以计算 DPI。

function getDPIFromCSS() {
    const div = document.createElement('div');
    div.style.width = '1in'; // 设置宽度为 1 英寸
    div.style.position = 'absolute';
    div.style.visibility = 'hidden';
    document.body.appendChild(div);

    const cssPixels = div.offsetWidth; // 获取 CSS 像素
    document.body.removeChild(div);

    const dpi = cssPixels; // 因为设置了 1in，所以 CSS 像素就是 DPI
    return dpi;
}

console.log(`当前屏幕 DPI (CSS): ${getDPIFromCSS()}`);

注意事项

• 使用 window.devicePixelRatio 是最简单的方式，但它仅仅提供了设备的像素比，不能直接计算真实的 DPI。
• Canvas 方法更为准确，但在某些浏览器中可能会受到限制。
• CSS 方法简单直接，但在某些情况下可能会受到样式影响，需谨慎使用。

总结

获取屏幕 DPI 是 Web 开发中的一项重要技能，能够帮助我们更好地适应不同分辨率的屏幕。上述方法各有优缺点，开发者可以根据实际需求选择合适的方式来获取 DPI。