Screen Resolution vs Viewport Size — What Is the Difference?

Screen resolution is the total number of physical pixels on your display hardware — for example, a 4K monitor has 3840 × 2160 pixels. Viewport size is the area of the browser window available for rendering content, which is always smaller than the full screen resolution because of the operating system taskbar, browser chrome (toolbar, tabs, address bar), and any window scaling.

For web developers, the viewport is what matters when writing responsive CSS. Media queries react to viewport dimensions, not physical screen resolution. This tool shows you both, plus the device pixel ratio that connects them.

What Is Device Pixel Ratio (DPR)?

Device Pixel Ratio (also called DPR or PPI scaling) is the ratio of physical pixels to CSS pixels. On a standard display, 1 CSS pixel equals 1 physical pixel — DPR is 1. On a Retina or high-DPI display, 1 CSS pixel maps to 2 or 3 physical pixels — DPR is 2 or 3. This is why images can look sharp on a standard screen but blurry on a Retina display unless they are served at double resolution.

A DPR of 2 means your device has 4 times as many pixels per area as a standard display (2× horizontal, 2× vertical). Always provide @2x or srcsetimages for high-DPI displays to ensure sharp rendering.

Common Screen Resolutions for Responsive Design Testing

• 320px — Older small mobile phones
• 375px — iPhone SE, standard mobile breakpoint
• 414px — iPhone Plus / Max models
• 768px — iPad portrait, tablet breakpoint
• 1024px — iPad landscape, small laptop
• 1280px — Standard HD laptop
• 1440px — Common desktop monitor
• 1920px — Full HD monitor
• 2560px+ — 2K / 4K displays