How Can I Accurately Detect Device DPI/PPI Using JavaScript?

Device DPI/PPI Detection in JS/CSS

Determining the display resolution of a device is crucial for generating images at appropriate sizes. However, detecting the system DPI or PPI directly from JavaScript or CSS poses challenges.

One suggested approach is to create an element with its width set to "1in" in CSS and measure its offsetWidth. However, this method proves unreliable on devices like iPhones, which falsely report a DPI of 96.

An alternative strategy involves obtaining the dimensions of the display in inches and dividing it by the width in pixels. Implementing this approach requires the following steps:

1. Create an invisible element with dimensions of 1x1 inch.
2. Position the element off-screen to prevent interference with the layout.
3. Calculate the device pixel ratio (DPR) using window.devicePixelRatio or default to 1.
4. Multiply the element's offsetWidth and offsetHeight by the DPR to determine the horizontal and vertical DPI.

Below is a JavaScript code snippet that demonstrates this approach:

<div>

This approach accurately captures the DPI/PPI of the device, allowing for precise generation of device-specific images.

The above is the detailed content of How Can I Accurately Detect Device DPI/PPI Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!