What is the difference between physical resolution and CSS resolution?

Physical resolution is the actual number of pixels your display hardware has. CSS resolution (logical resolution) is what the browser uses for layout — it equals physical resolution divided by the device pixel ratio. On a 4K monitor running at DPR 2, a 3840×2160 physical screen might present as 1920×1080 CSS pixels.

What does the 1:1 checker pattern test show?

The 1:1 checker pattern renders alternating black and white pixels at your display's physical pixel density. If your display is applying scaling, the checker will appear blurred or gray due to sub-pixel anti-aliasing. A native-resolution Retina display renders it as a uniform 50% gray. This reveals whether OS scaling is affecting pixel-perfect rendering.

← Back

Screen Resolution Test — DPI, Scaling & 1:1 Pixel Checker

Check your screen resolution, device pixel ratio (DPR), CSS vs physical pixels, aspect ratio, color depth, and live viewport size. Includes a 1:1 checker pattern test to reveal display scaling artifacts.

Loading display info…

Screen Resolution & DPI — Complete Display Info Guide

Your display has two distinct concepts of resolution: the physical resolution (actual hardware pixels) and the CSS / logical resolution (what the browser uses for layout). On modern HiDPI and Retina displays, the operating system scales content up so that text and UI elements aren't microscopic — the ratio between these two is called the Device Pixel Ratio (DPR).

Physical vs CSS Resolution

A MacBook Pro 14" has a physical resolution of 3024×1964, but macOS scales it to present a logical resolution of around 1512×982 at DPR 2.0. This means each CSS pixel is rendered using 2×2 physical pixels (4 total), resulting in ultra-sharp text and UI while keeping web layouts the same size as a 1080p monitor.

What is Device Pixel Ratio (DPR)?

DPR is accessed via window.devicePixelRatio. Common values:

DPR 1.0 — Standard/non-scaled display (1080p, 1440p monitors at native scale)
DPR 1.5 — Common on some Windows laptops with 150% scaling
DPR 2.0 — Retina MacBooks, iPad Pro, iPhone SE
DPR 3.0 — iPhone 15, Samsung Galaxy S24 (flagship phones)
DPR 3.75+ — Samsung Galaxy S24 Ultra

The 1:1 Checker Pattern Test

This tool's most unique feature is the 1:1 pixel checker pattern. It renders alternating black/white pixels at your screen's actual physical pixel count. On a native Retina display at DPR 2, it renders as a smooth 50% gray — because the 1px physical grid is below the human eye's resolution threshold at normal viewing distance. On a standard DPR 1 display, you'll see a sharp checkerboard. Scaling artifacts appear as moiré patterns.

Color Bit Depth

Color depth, accessed via screen.colorDepth, indicates how many bits per pixel your display uses. 24-bit (8 bits per RGB channel) is standard SDR. 30-bit (10 bits per channel) enables HDR with 1.07 billion colors vs 16.7 million for 24-bit, eliminating banding in gradients.