What is the difference between viewport size and screen resolution?

The viewport is the visible area inside the browser window after toolbars and scrollbars, while screen resolution is the whole display. A maximised window is usually smaller than the screen.

Which breakpoints does it use?

It reports the common Tailwind/Bootstrap-style breakpoints — sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px — to help with responsive layout work.

How is the scrollbar width measured?

It is window.innerWidth minus document.documentElement.clientWidth — the difference between the full viewport and the area left after the scrollbar. On macOS overlay scrollbars this is often 0; on Windows it is typically 15–17px.

What is the device pixel ratio (DPR)?

DPR is how many physical screen pixels map to one CSS pixel. A standard display is 1, a Retina or high-DPI phone is 2 or 3. Multiplying the CSS viewport by DPR gives the physical viewport in device pixels.

Why does the value change when I open dev tools?

Docking browser dev tools shrinks the page area, so innerWidth and innerHeight drop accordingly. The reading always reflects the live area your page actually has.

Which width do CSS media queries respond to?

Media queries match the CSS-pixel viewport width shown here (window.innerWidth), not the physical device pixels, which is why the breakpoint label tracks this number.

Is any data collected?

No — the size is read from your own browser with window.innerWidth and innerHeight and never leaves your device.

Viewport Size Checker

The viewport is the visible area of a web page inside the browser window — what is left after toolbars, the address bar and scrollbars. CSS media queries and responsive layouts respond to this size, not to your full screen resolution, so knowing it precisely is essential for front-end and responsive-design work. This checker shows your live viewport plus the active breakpoint, orientation, scrollbar width, device pixel ratio and the physical viewport.

How it works

Every value is read directly from the browser and refreshed on each resize and orientationchange event:

CSS pixels: window.innerWidth × window.innerHeight — the viewport that media queries see.
Document area: document.documentElement.clientWidth/Height, which excludes the scrollbar.
Scrollbar width: innerWidth − clientWidth.
Orientation: Landscape if width ≥ height, otherwise Portrait.
Device pixel ratio: window.devicePixelRatio.
Physical viewport: the CSS size multiplied by the DPR, rounded.

Example

On a Retina laptop with a maximised window you might see:

Value	Reading
CSS pixels	1280 × 720
Breakpoint	Desktop (xl 1280–1535px)
Orientation	Landscape
Scrollbar width	15 px
Device pixel ratio	2×
Physical viewport	2560 × 1440

Here a 1280-px-wide CSS viewport falls in Tailwind’s xl range, and at DPR 2 it occupies 2560 physical device pixels. Resize the window or rotate your phone and every value updates instantly — all measurements stay in your browser.