Viewport Size Tester

Check your browser's real-time viewport size, screen resolution, device pixel ratio, and orientation.

Viewport Preset Reference

Active Mode: Live WindowViewport: 0 × 0 pxAspect Ratio: -DPR: 1xBreakpoint: Mobile (<640px)

Visual Proportion Preview (-)0 × 0 px

0 × 0Mobile (<640px)

Viewport (CSS px)

0 × 0

window.innerWidth × innerHeight

Screen Resolution

0 × 0

Total physical screen pixels

Available Screen

0 × 0

Minus taskbar / OS UI

Device Pixel Ratio

window.devicePixelRatio

Physical Pixels

0 × 0

CSS px × DPR

Orientation & Aspect

unknown

Ratio: -

CSS Media Query Snippet

@media (max-width: 0px) {
  /* CSS rules for viewports <= 0px */
}

Resize your browser window to see live values update in real time. Select preset dimensions to quickly test responsive breakpoint criteria.

What is viewport size & responsive breakpoints?

The viewport is the visible area of a web page expressed in CSS pixels. window.innerWidth and innerHeight give the live viewport dimensions excluding browser chrome. The Device Pixel Ratio (DPR) indicates how many physical device pixels render a single CSS pixel. Multiply viewport dimensions by DPR to obtain the exact physical resolution.

Built and maintained by Meet Shah · Last updated 1 August 2026

What this tool is used for

Finding the actual viewport width at which a layout breaks, rather than guessing from a breakpoint list.
Checking the device pixel ratio when an image looks soft on one machine and sharp on another.
Confirming a media query's boundary against the real reported width.
Comparing the viewport against the screen resolution to see how much chrome the browser takes.
Watching the values change while resizing to find an off-by-one in a breakpoint.

Frequently Asked Questions

Why does the reported width differ from my screen resolution?: Because CSS pixels are not hardware pixels. A 2× display reports half its physical resolution to CSS, so a 2880-pixel-wide panel is a 1440 CSS pixel viewport — which is what media queries and layout actually respond to.
What is the difference between innerWidth and clientWidth?: `window.innerWidth` includes the scrollbar; `document.documentElement.clientWidth` does not. On a desktop with a classic scrollbar that is a 15–17 pixel discrepancy, and it is why a media query and a JavaScript check can disagree at a breakpoint.
Why does viewport height change while scrolling on mobile?: Because the browser's address bar collapses and expands. That instability is why `svh`, `lvh` and `dvh` were added — small, large and dynamic viewport height — and why `100vh` produced the notorious cut-off layout on iOS Safari.
How do I test a real device size accurately?: Device emulation in DevTools is close for layout and not for everything — touch behaviour, font rendering and the real address-bar dance differ. Anything depending on those needs a physical device or a remote testing service.
Should breakpoints be chosen from device sizes?: No — from where the content stops working. Device dimensions change constantly and a breakpoint tied to last year's popular phone ages badly, while one placed where a layout genuinely breaks stays correct indefinitely.

Common errors and gotchas

Confusing screen resolution with viewport size. The difference is browser chrome, zoom and the pixel ratio.
Forgetting that a visible scrollbar reduces the viewport width, which is a classic one-pixel media-query bug.
Testing at browser zoom other than 100%, which changes the reported CSS pixel width.
Assuming a mobile emulator reports the same values as the device, particularly for the pixel ratio.
Reading the value once rather than while resizing, and missing the transition where the layout actually breaks.