dpi
Dots per CSS inch.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 29+ |
| Chrome Android | 29+ |
| Edge | 12+ |
| Firefox | 8+ |
| Firefox Android | 8+ |
| Safari | 16+ |
| Safari iOS | 16+ |
Formula 1dpi = 1/96dppx
How it works
Dots per inch is the old print unit, and in CSS it counts dots per CSS inch, which is 96px. A screen at a device pixel ratio of 2 therefore reports 192dpi whatever its real density. (min-resolution: 192dpi) matches the same screens as (min-resolution: 2dppx), which was checked at seven ratios between 1 and 3.
The number is not a measure of how sharp a display looks. It is the ratio of device pixels to CSS pixels scaled by the fixed 96, and it ignores the physical size of the screen: two displays with the same ratio report the same dpi.
Write dpi when a source you work from already uses it, such as a print specification or a scanner setting. On screen, dppx says what the browser measures and keeps the number small: 2dppx instead of 192dpi.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Matching a figure that arrives in dpi, such as a print specification or an old min-resolution query.
Watch out
The inch here is the CSS inch of 96px, so dpi on a screen tells you nothing about the real pixel density of the panel.
@media (min-resolution: 192dpi) {
.plate { background-image: url("plate-192dpi.png"); }
}