Viewport Size Checker
Your viewport size
— × —
CSS pixels (layout viewport)
Resize the window or rotate your device to watch the values update live. Everything is read locally in your browser.
How to use
- Open the page — your current viewport width and height appear at the top in CSS pixels.
- Resize the browser window or rotate your device and watch the numbers update instantly.
- Use the detail card to compare viewport (inner), window (outer), and full screen resolution.
FAQ
What is my viewport size?
The large value at the top is your viewport — window.innerWidth × window.innerHeight in CSS pixels. This is the area available to your page content, excluding browser toolbars and scrollbars chrome.
What is the difference between viewport and screen size?
Screen size (screen.width × screen.height) is the whole display. The viewport is just the part of the browser showing your page. On desktop the viewport is smaller because of toolbars; on mobile it also shrinks when the address bar is visible.
Why does my viewport not match a CSS breakpoint?
CSS width media queries follow the layout viewport — the inner width shown here — not the screen resolution. If a breakpoint seems off, compare it against the inner width value, not your monitor's advertised resolution.
What is inner vs outer size?
Inner width/height is the content viewport. Outer width/height is the entire browser window including toolbars and borders. The detail card shows both so you can see how much space the browser UI consumes.
Why does my mobile viewport keep changing?
On phones, the browser address bar hides and reveals as you scroll, which changes the available height. That is normal, and it is why this checker updates the values live on resize and orientation change.
Is any data sent to a server?
No. All measurements come from window and screen properties in your browser and are displayed locally. Nothing is uploaded.
Introduction
Viewport Size Checker shows the exact size of your browser's content area in real time. The headline reports window.innerWidth × window.innerHeight — the CSS-pixel dimensions your layout actually responds to — and the values update the instant you resize the window or rotate your device.
For responsive design, the viewport is the number that matters. Media queries, fluid grids, and breakpoint bugs all hinge on the inner dimensions, not on the monitor's advertised resolution. This tool puts that number where you can read it without opening developer tools.
What this tool measures
| Field | Source | What it means |
|---|---|---|
| Viewport (inner) | window.innerWidth/Height |
Content area your CSS sees — the breakpoint driver. |
| Window (outer) | window.outerWidth/Height |
Whole browser window including chrome. |
| Screen resolution | screen.width/Height |
Full display size in CSS pixels. |
| Device pixel ratio | window.devicePixelRatio |
Physical-to-CSS pixel multiplier. |
| Orientation | screen.orientation |
Portrait or landscape, when reported. |
Viewport vs screen vs window
These three are easy to confuse:
- Screen is the entire physical display.
- Window (outer) is the browser window, which may be smaller than the screen if not maximized.
- Viewport (inner) is the part of the window showing your page, after toolbars and scrollbars.
CSS @media (max-width: …) rules follow the inner value, which is why this checker leads with it.
Common use cases
- Debugging breakpoints — confirm the exact inner width when a layout breaks at an unexpected size.
- Responsive QA on real devices — read the live viewport on a phone or tablet, including how the address bar affects height.
- Capturing repro steps — record the precise viewport in a bug report instead of guessing.
- Design reviews — verify a comp's target width against your actual content area.
Best practices
- Always cite the inner width when discussing CSS breakpoints, not the screen resolution.
- Test on real devices: mobile viewports change as the address bar hides, which emulators do not always replicate.
- Combine this with the device pixel ratio checker to reason about both size and density, and with device info for the full environment snapshot.