Screen Resolution Checker

Screen, viewport and physical pixels

Three different sizes are easy to mix up. The screen size (screen.width and screen.height) is the whole display as the browser reports it, in CSS pixels. The viewport (window.innerWidth and innerHeight) is only the part of that screen where the page is drawn, so it changes with window size, toolbars and zoom. The physical resolution is the real number of pixels on the panel, and the browser does not report it directly.

That is why this tool estimates it as CSS pixels times the devicePixelRatio. On a plain 1920 by 1080 monitor at 100% scaling the three views agree. On a phone or a laptop with scaling they do not, and that is expected, not a bug.

• Screen = screen.width and screen.height, in CSS pixels.
• Viewport = window.innerWidth and innerHeight, in CSS pixels.
• DPR = window.devicePixelRatio, the physical pixels behind one CSS pixel.
• Estimated physical resolution = screen size times DPR, rounded.

A scaled Windows laptop and a high density phone

Example 1, a laptop with a 1920 by 1080 panel and Windows scaling set to 125%: the browser reports a screen of 1536 by 864 CSS pixels and a DPR of 1.25. Multiplying gives 1920 by 1080, which this tool names Full HD. Text is larger than at 100% scaling because every CSS pixel is drawn with 1.25 physical pixels.

Example 2, a phone that reports 390 by 844 CSS pixels with a DPR of 3: the estimated physical resolution is 1170 by 2532. The page is laid out for 390 pixels, but the panel uses 1170 real pixels across, which is why text and images look sharper than on a desktop screen with the same CSS width.

Refresh rate, pixel density and breakpoints

The refresh rate is measured, not read: the browser has no API that states it, so the tool counts animation frames for about two seconds and uses the median interval. The result reflects what the browser is actually drawing, which can be lower than what the monitor supports.

Pixel density depends on the physical diagonal, which no browser can know, so you enter it. From the diagonal and the resolution the tool derives PPI, the physical width and height, and a viewing distance based on the approximate rule that one pixel spans one arcminute. For responsive design, CSS breakpoints react to the viewport width in CSS pixels, so the breakpoint panel compares your viewport with the Tailwind and Bootstrap defaults.

• Refresh rate: measured with animation frames, then rounded to a common value.
• PPI: diagonal in pixels divided by diagonal in inches.
• Viewing distance: about 3438 divided by PPI, in inches.
• Breakpoints: Tailwind sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Bootstrap sm 576, md 768, lg 992, xl 1200, xxl 1400.