Screen resolution checker
Instantly see your screen resolution, the physical pixel count after the device pixel ratio, the available area excluding the taskbar, your browser viewport, aspect ratio and colour depth. It is useful for designers checking breakpoints, QA testers reproducing display bugs, developers targeting specific screen sizes, and anyone filing a support ticket who needs the exact numbers.
How it works
The tool reads standard browser display properties — no measurement, screenshot, or upload is involved:
| Value | Source | What it means |
|---|---|---|
| CSS resolution | screen.width × screen.height | The logical resolution browsers use for layout |
| Device pixel ratio | window.devicePixelRatio | Physical pixels per CSS pixel |
| Physical resolution | CSS × DPR | Actual hardware pixels on the panel |
| Available area | screen.availWidth × screen.availHeight | Usable area after OS chrome (taskbar, Dock, menu bar) |
| Viewport | window.innerWidth × window.innerHeight | Content area inside the current browser window |
| Colour depth | screen.colorDepth | Bits per pixel for colour rendering (typically 24 or 30) |
The aspect ratio is the CSS width-to-height ratio of the screen, reduced to its simplest whole-number form. All values refresh live as you resize or move the window between monitors — useful for checking how values change on a multi-monitor setup with mixed pixel densities.
CSS pixels vs physical pixels — why they differ
Modern high-DPI screens pack far more hardware pixels into the same physical area than older displays. If the browser used physical pixels for layout, text and buttons on a 4K screen would appear tiny. To fix this, browsers adopt a logical CSS pixel that scales with the device pixel ratio (DPR):
- DPR 1 (most standard monitors): one CSS pixel = one physical pixel
- DPR 2 (Retina, most modern laptops and phones): one CSS pixel = a 2×2 block of physical pixels
- DPR 3 (flagship phones): one CSS pixel = a 3×3 block
A 14-inch MacBook Pro M3 running at native resolution reports a CSS resolution of 1512 × 982 at DPR 2, giving a physical resolution of 3024 × 1964 — 5.9 million hardware pixels behind the scenes, even though the browser sees a 1.48-megapixel logical canvas.
A 27-inch 1440p monitor at DPR 1 shows 2560 × 1440 CSS and physical — they match because the display is not high-DPI scaled.
Common use cases
Web design and responsive development: the viewport width is the number your CSS media queries respond to. Checking it alongside the full screen resolution tells you whether the window is maximised and whether you are hitting the right breakpoint.
QA testing: when a layout issue is reported on a specific device, the combination of CSS resolution, DPR, viewport, and colour depth is the minimum information needed to reproduce it reliably.
Multi-monitor setups: different monitors often have different DPRs. Moving the browser window between screens shows how DPR and available area change, which matters when designing for systems where users may drag windows across displays.
Reporting display issues: instead of “my screen is about 1920 wide”, the exact CSS resolution, DPR, and viewport give a support team or developer the precise values needed without guesswork.
Everything is read directly from your browser and nothing is uploaded.