Screen Resolution Checker

Three numbers here get confused with one another constantly, and knowing which is which solves most display puzzles. Screen resolution is what the operating system reports for the whole display. The viewport is the rectangle this page can actually paint in, always smaller because the browser’s own toolbar, tabs and any scrollbar take a share — this is the number that CSS media queries respond to, which is why a layout can break at a window size that seems well above the breakpoint. Device pixel ratio is the third and least understood: on any modern high-DPI screen, one CSS pixel is drawn using several hardware pixels, so a display reporting 1512 × 982 may have over three thousand real pixels across. That is why an image exported at exactly the CSS dimensions looks soft on a laptop or a phone, and why artwork for such screens needs exporting at two or three times the size it will be displayed at. The aspect ratio is snapped to standard values on purpose: 1366 × 768 reduces mathematically to 683:384, which is correct, useless, and not what anyone means when they call that screen 16:9.

Hardware pixels are the CSS pixel dimensions multiplied by the device pixel ratio, so a 1512 × 982 screen at a ratio of 2 is really 3024 × 1964 physical pixels. Aspect ratio is the width and height divided by their greatest common divisor, then snapped to the nearest standard ratio when it is within about 1%.

Everything shown comes from what the browser reports, which is not always the whole truth: browser zoom changes the figures, some privacy features deliberately round or spoof them, and a browser in a virtual machine reports the virtual display. Physical screen size in inches cannot be detected at all, so true PPI is not shown — only the device pixel ratio. On multi-monitor setups the values describe the screen this window is on.

A MacBook reports 1512 × 982 CSS pixels at a device pixel ratio of 2 — a genuine 3024 × 1964 panel, in a 16:10 aspect ratio, with a viewport a little smaller than the screen because of the browser chrome.

1. Open the page — the readout appears immediately.
2. Resize the window to watch the viewport and breakpoint change.
3. Compare screen resolution against hardware pixels to see the pixel ratio.
4. Rotate a phone or tablet to see the orientation update.

• Confusing viewport size with screen resolution when debugging a media query.
• Exporting artwork at CSS pixel size and wondering why it looks soft on a phone.
• Forgetting browser zoom is active, which changes every reported figure.
• Assuming a monitor is at native resolution when the OS has scaled it.

Everything your browser knows about this display, read straight from it: screen resolution, the real hardware pixel count, the viewport this page can draw in, aspect ratio, colour depth, orientation and the CSS breakpoint you are currently in. Resize the window and the figures update live.

Developers testing responsive layouts, anyone reporting a display bug, and people checking what a device actually supports.

• Separates screen resolution from viewport size, which are routinely confused.
• Shows the hardware pixel count as well as the CSS pixel count.
• Names the resolution — 1080p, 1440p, 4K — rather than leaving you to look it up.
• Updates live while you resize, so breakpoints can be tested directly.

• Checking which CSS breakpoint a layout is currently hitting.
• Reporting a display problem with the exact figures a developer needs.
• Confirming a monitor is running at its native resolution.
• Working out the pixel dimensions artwork needs on a high-DPI screen.