Screen resolution vs viewport

Screen resolution

Screen resolution is the width × height reported by the screen API, typically in CSS pixels. On high-density displays, CSS pixels differ from marketing “physical pixels.” A Retina panel may report a logical size smaller than the raw panel count.

Check yours with What is my screen resolution?.

Viewport

The viewport is the visible area of the page inside the browser window. It shrinks when toolbars or sidebars appear and changes as you resize or rotate. Responsive CSS usually keys off viewport width—not the full screen resolution.

Use the viewport tool while resizing to see live changes.

Device pixel ratio

Device pixel ratio (DPR) compares CSS pixels to device pixels. Values like 2 or 3 are common on phones and sharp laptops. Sites use DPR to choose 2× assets. DPR is not the same as PPI; PPI needs a true physical diagonal.

See pixel density.

Color depth

Color depth reports how many bits the browser associates with screen colors—often 24-bit. It is not identical to wide-gamut (Display P3) support. Use it as a capability hint when debugging images, not as a calibration certificate.

Open color depth.

Debugging checklist

Layout broken on mobile? Measure viewport. Image soft on Retina? Check DPR. App thinks you have a huge canvas while the window is small? You looked at screen resolution instead of viewport. Keep the tools side by side when reproducing a bug report.