Live detection
Everything is read right now, from your own device, inside the browser. Resize the window and watch what updates.
Screen resolution
Width
Height
Available area
Orientation
screen × DPR
Native panel resolution (declared)
The surface the browser renders to (screen × DPR). Under scaling it is NOT guaranteed to be the panel's real pixels, it can even exceed them.
Do you know your screen's real (native) resolution?
Optional. The browser has no way to learn it, and at the current DPR a genuinely high-density panel is indistinguishable from an image drawn large and then scaled down. Declare it and that is settled. You will find it in your system's display settings.
Common values:
The hardware pixel is taken to equal the device pixel, i.e. we assume the image reaches the screen with no intermediate scaling.
Native panel resolution: — declared
Your declaration stays locally in your browser (localStorage) and is not sent anywhere.
Visible area (viewport)
Visual viewport (visualViewport)
Pinch zoom (visualViewport)
Offset (visualViewport)
Colour depth
Pixel depth
Touchscreen
| pixel | What it is | Length | Do we have it? |
|---|---|---|---|
| css pixel | the browser's logical unit for layout | 1 / CSS ppi | ✓1 |
| logical pixel | OS logical pixel (point / DIP) | = css (at 100% zoom) | ✓ |
| device pixel | the surface the browser renders to (css/logical × DPR) | css ÷ DPR | ✓2 |
| hardware pixel | the hardware dot, the screen's native resolution | dot pitch | ✗3 |
1 css pixel: we measure it at /tools/monitor_dpi/ · 2 device pixel: computed, not the panel itself · 3 hardware pixel: no access, we don't measure it