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 reading
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.
Common responsive breakpoints
The tool maps your width to the standard Tailwind / Bootstrap grid breakpoints, which are among the most widely used in production:
| Breakpoint | Width range | Typical target |
|---|---|---|
| xs (default) | 0–639px | Phones (portrait) |
| sm | 640–767px | Phones (landscape) / small tablets |
| md | 768–1023px | Tablets / small laptops |
| lg | 1024–1279px | Laptops and desktops |
| xl | 1280–1535px | Wide desktops |
| 2xl | 1536px+ | 4K and ultra-wide |
Media queries respond to the CSS-pixel width shown here, not the physical device width. A high-DPI phone with 1170 physical pixels wide but DPR 3 has a CSS viewport of 390px, placing it firmly in the xs range.
Why scrollbar width matters
On Windows and Linux, browser scrollbars take up 15–17px of the viewport and reduce the usable width. A layout that looks fine at 768px on macOS (overlay scrollbars, width = 0) may break at 768px on Windows because the visible content area is actually 751–753px. If you are hitting a breakpoint inconsistency between platforms, check the scrollbar width — it is often the culprit.
Practical uses
- Responsive QA — resize the browser window and verify the breakpoint label changes exactly where your CSS expects it.
- Screenshot tool sizing — determine what viewport you should set in Puppeteer or Playwright for a consistent capture.
- Debug media query issues — see the exact pixel width that a media query sees, which may differ from the window chrome size.
- Device emulation check — confirm that browser dev-tool device emulation is actually targeting the expected CSS width.
Resize the window or rotate your phone and every value updates instantly — all measurements stay in your browser, nothing is sent anywhere.