DPI / Pixel Density Test
Browsers work in CSS pixels, which are scaled to physical pixels by the device pixel ratio. This page shows the ratio and draws a ruler so you can see how far that is from real inches.
- Device pixel ratio
- —
- Reported by the browser. Operating system scaling sets it, and most desktop browsers multiply it by the page zoom.
- Physical pixels per CSS pixel
- —
- The ratio squared: how many physical pixels one CSS pixel covers in area.
- Nominal pixel density
- —
- 96 × the ratio. Assumes the CSS convention of 96 px per inch, which is not a measurement of your screen.
Reading what the browser reports…
On-screen ruler
Hold a real ruler against these. If they match, your screen is showing exactly 96 CSS pixels per inch. Most screens do not, which is normal.
Estimate the true pixel density
A browser cannot measure the physical size of your screen, so it cannot know the true DPI on its own. Everything above is calculated from values the browser reports.
What the numbers mean
CSS pixels
A CSS pixel is the unit web pages are laid out in, and the CSS specification defines 96 of them as one inch. That definition is a convention for layout, not a measurement of your screen.
Physical pixels
A physical pixel is one of the light-emitting dots in the panel, fixed by the hardware. Operating system scaling and browser zoom decide how many of them each CSS pixel covers.
Device pixel ratio
The device pixel ratio is how many physical pixels wide one CSS pixel is, so a ratio of 2 draws each CSS pixel as a 2 × 2 block. Scaling of 150 percent gives 1.5, and most desktop browsers multiply it further by the page zoom.
Runs entirely in your browser. Nothing is uploaded or stored.
How to use
- Read the device pixel ratio and the number of physical pixels per CSS pixel.
- Hold a real ruler against the on-screen ruler. If they match, your browser is showing 96 CSS pixels per inch.
- Enter your screen diagonal in inches to estimate the true pixel density from the resolution the browser reports.
- Change the page zoom and watch the ratio. Most desktop browsers multiply it by the zoom level, though some keep it fixed.
What this test can detect
- Whether the display is treated as high density (a ratio above 1).
- How far the nominal 96 pixels per inch is from the true size of your screen.
- Browser zoom or operating system scaling that is not at 100 percent.
Important
- A browser cannot measure the physical size of your screen, so it cannot know the true DPI. The ruler assumes 96 CSS pixels per inch, which is only a convention.
- To get the real pixel density you need the physical diagonal from the manufacturer and the native resolution.
- Fractional ratios such as 1.25 or 1.5 are normal on Windows and Android.