Viewport size dimension
The viewport is the visible area a page renders into — distinct from the physical screen resolution. Analytics tools can capture viewport size to understand the canvas your layout actually had. This page explains the difference from screen resolution, the role of CSS pixels and device pixel ratio, and why values cluster.
What this means
The viewport is the rectangle your page actually renders into — what window.innerWidth and innerHeight report. It is what your CSS media queries respond to, which makes it the more relevant dimension for layout decisions than the physical screen.
Screen resolution describes the whole display; the viewport excludes browser chrome, the tab bar, and any non-maximised window space. On the same screen, two visitors can have very different viewports.
- Viewport = visible render area (innerWidth/innerHeight)
- Screen resolution = whole physical display
- Media queries respond to the viewport, not the screen
Why CSS pixels and zoom matter
Viewport is measured in CSS pixels, not physical pixels. The device pixel ratio (DPR) maps CSS pixels to physical ones, so a high-DPR phone reports a modest CSS viewport despite a dense screen. Comparing viewport to screen resolution without accounting for DPR misleads.
Zoom and window resizing also move the number continuously, and orientation changes swap width and height on mobile. Because of this, viewport values cluster around common breakpoints rather than forming clean device groups — bucket them for analysis.
- Measured in CSS pixels; DPR maps to physical pixels
- Zoom, resize, and orientation shift the value
- Bucket around breakpoints rather than exact sizes
How it appears in analytics and logs
A viewport size value is the visible CSS-pixel area at capture time. It is smaller than screen resolution because it excludes browser chrome, and it changes with window resizing and zoom.
Diagnostic use case
See the real rendering area visitors had — accounting for browser chrome and window size — to make responsive breakpoint decisions.
What WebmasterID can help detect
WebmasterID can record viewport coarsely first-party so layout decisions use the real canvas without adding fine-grained fingerprinting entropy.
Common mistakes
- Confusing viewport size with physical screen resolution.
- Ignoring device pixel ratio when comparing the two.
- Reporting exact viewport pixels instead of breakpoint buckets.
Privacy and accuracy notes
Viewport size is lower entropy than exact screen resolution but still contributes to fingerprinting in combination. Capture it coarsely where possible. This is educational, not legal advice.
Related pages
- Screen resolution dimension
The screen resolution dimension records the visitor's screen dimensions in pixels, read from the browser's screen API. It helps with responsive-design decisions, but it is coarser and more privacy-sensitive than it appears: device pixel ratio means CSS pixels differ from device pixels, common resolutions cluster heavily, and fine-grained screen metrics are a known fingerprinting input — so coarse buckets are the privacy-safe approach.
- Device category: desktop, mobile, tablet
Device category groups visits into desktop, mobile, or tablet. It is derived from the user-agent string (increasingly, User-Agent Client Hints), so it is a classification, not a hardware fact. Tablets, desktop-mode mobile browsers, and foldables blur the boundaries, and the user agent can be spoofed.
- Device model dimension
The device model dimension reports the specific device a visit came from. On the web it is inferred from the user-agent string or client hints; in apps the SDK reads it directly. This page explains the derivation, why web models are deliberately coarse for privacy, and how app data is more precise.
- Privacy-first analytics
Capture viewport coarsely to limit entropy.
Sources and verification notes
- MDN — Viewport conceptsDefines the viewport and its relationship to layout.
- MDN — Window.innerWidthHow viewport width is read in CSS pixels.
Last reviewed 2026-06-24. Facts are checked against primary/official sources where available; uncertain specifics are marked “Data not yet verified” rather than guessed.