Screen Resolution Tester
Check screen, viewport, pixel ratio, and color depth. Your work stays on this device whenever possible.
How to use Screen Resolution Tester
- Read the four tiles at the top: CSS Screen, Live Viewport, Pixel Ratio and Color Depth.
- Scan the detail list below them for Physical Hardware Pixels, Available Desktop Area, Device Pixel Ratio (DPR) and Screen Orientation.
- Drag the window edge or turn on browser zoom; the Live Viewport tile and row refresh whenever the window is resized.
- Compare CSS Screen Resolution with Physical Hardware Pixels to see how much your operating system scales the interface.
- Press "Copy Screen Specs (JSON)" to copy the detail list as JSON.
Worked example
A 1920 x 1080 laptop panel with Windows scaling set to 125 percent reports CSS Screen 1536 × 864 and a pixel ratio of 1.25. Physical Hardware Pixels are 1536 x 1.25 = 1920 by 864 x 1.25 = 1080, printed as 1920 × 1080 px (1.25× DPR). The ratio line adds HiDPI / Retina Display because it is above 1.
When to use this tool
- Choosing correct breakpoints by seeing what CSS width a phone or tablet really has.
- Finding out whether a monitor is running at its native pixel count.
- Recording screen details for a design handoff or a bug report.
Important limitations
Browser zoom levels, OS display scaling, window borders, and multi-monitor configurations affect CSS viewport calculations relative to physical hardware resolution.
Frequently asked questions
What is the difference between CSS pixels and physical pixels?
A CSS pixel is the unit web pages are laid out in. Physical pixels are the actual dots on the panel. The tool multiplies the CSS screen size by the pixel ratio to estimate the physical figure, then rounds it.
Why is Live Viewport smaller than the screen?
The viewport is only the drawable page area inside the browser window, without toolbars, tabs or scrollbars. It changes when you resize or zoom, while the screen values usually stay put.
Is the physical pixel figure always exact?
No. It is CSS width times the ratio, so a fractional scale factor such as 1.25 or a non-standard zoom can leave it a pixel or two off. With several monitors it reports the screen showing the window.
What does Available Desktop Area exclude?
It removes space permanently taken by the operating system, such as a taskbar or dock. A screen of 1920 x 1080 with a 40-pixel taskbar typically reports a height near 1040.
Does Copy Screen Specs (JSON) follow a resized window?
Not fully. The tiles and list update on resize, but the copied JSON is built from the values read when the page loaded. Reload after resizing if you need the viewport in the copied text.
What do the breakpoint, PPI and display tests add?
The panel shows the Tailwind and Bootstrap breakpoint for the current viewport and the CSS media features this browser reports, such as reduced motion and colour gamut. Enter the screen diagonal to get PPI and a centimetre ruler, run a full-screen colour test to spot stuck pixels, or copy a plain-text report.