Viewport Size vs Screen Resolution: Key Differences

Viewport vs Screen Resolution

These two concepts are frequently confused but serve different purposes in web development.

Screen Resolution

Returned by screen.width and screen.height, this represents the total pixel dimensions the operating system reports for the display. On a 1920×1080 monitor, these values are 1920 and 1080 regardless of what the browser is doing.

Viewport Size

The viewport is the area available for rendering web content. It is measured by document.documentElement.clientWidth and clientHeight. The viewport is always smaller than or equal to the screen resolution because it excludes:

• Browser address bar and tabs
• Browser scrollbars
• OS taskbar or dock (if the browser is not fullscreen)

DPR Complicates Things

On a MacBook Pro with a 2560×1600 native resolution and DPR of 2:

Property	Value
screen.width	1280 (CSS pixels, scaled)
screen.height	800
Viewport width (approx)	1280 (minus scrollbar)
Physical pixels	2560 × 1600

The screen properties report CSS pixels (physical pixels / DPR), not raw hardware pixels.

window.innerWidth vs clientWidth

window.innerWidth includes the scrollbar width. document.documentElement.clientWidth excludes it. For responsive design, clientWidth is more useful because CSS media queries use the viewport width without scrollbars.

Which Should You Use?

• Layout and responsive design: Use viewport size (clientWidth)
• Full-screen apps: Use screen.width / screen.height
• Canvas or WebGL rendering: Use viewport size × DPR for the buffer