Your screen resolution in CSS pixels, the physical pixel count behind it, the size of the browser viewport and the pixel ratio that links them. The numbers update as you resize the window or rotate your device.
- Physical pixels (approx.)
- —
- Device pixel ratio
- —
- Browser viewport
- —
- Available screen (minus taskbar)
- —
- Colour depth
- —
- Orientation
- —
- Window position
- —
- Zoom level (estimate)
- —
Live: resize the window or rotate your device and the values change.
CSS pixels, physical pixels and why they differ
Operating systems scale their interface on dense displays so that text stays readable. A 4K monitor at 150% scaling behaves, to a web page, like a 2560×1440 screen; a phone with a 1170×2532 panel reports 390×844. The scaling factor is the device pixel ratio. Web pages lay out in the scaled CSS pixels and browsers fetch higher-resolution images when the ratio is above 1, which is why an image that looks sharp on one screen can look soft on another.
Common screen sizes
| Device class | Typical CSS width | Typical DPR |
|---|---|---|
| Phones | 360 – 430 | 2 – 3 |
| Small tablets | 600 – 800 | 2 |
| iPad and large tablets | 810 – 1024 | 2 |
| Laptops | 1280 – 1536 | 1 – 2 |
| Desktop monitors | 1920 – 2560 | 1 – 1.5 |
| 4K at 150 % | 2560 | 1.5 |
More browser signals, including languages, time zone and hardware, are on the browser info page.