What Is My Viewport Size
Your viewport size
— × —
CSS pixels (layout viewport)
Resize the window or rotate your device to watch values update live. Nothing is uploaded.
How to use
- Open the page — your viewport size appears at the top as width × height.
- Resize the browser window and watch the numbers update live.
- Click Copy to paste the viewport dimensions into a bug report or CSS breakpoint note.
FAQ
What is my viewport size?
Your viewport size is window.innerWidth × window.innerHeight — the CSS pixel dimensions of the browser's content area where pages render. It excludes toolbars, tabs, and scrollbars outside the layout viewport.
What is the difference between viewport and screen resolution?
Screen resolution is the full monitor size. Viewport is only the visible page area inside the browser window — usually smaller. Developers use viewport for media queries and layout.
What are inner vs outer window sizes?
Inner size is the viewport (content area). Outer size includes browser chrome — tabs, address bar, and window frame. Both are listed in the details panel.
Why do CSS pixels differ from physical pixels?
Device pixel ratio (DPR) scales CSS pixels on HiDPI screens. Viewport is in CSS pixels; multiply by DPR for physical pixels on the display.
Does mobile browser chrome affect viewport?
Yes. Showing or hiding the address bar on phones changes innerHeight. Rotate the device or scroll to see viewport shifts — this page updates on resize and orientationchange.
Is any data sent to a server?
No. Dimensions are read from window APIs locally. Nothing is uploaded.
Introduction
What Is My Viewport Size shows the live width and height of your browser's layout viewport in CSS pixels — the numbers that matter for responsive design, media queries, and "why does this breakpoint look wrong?" debugging.
Viewport is smaller than screen resolution whenever tabs, toolbars, or split-screen reduce the content area. This page tracks inner dimensions and updates as you resize, so you always see what CSS sees right now.
What this tool measures
| Field | Meaning |
|---|---|
| Viewport (inner) | window.innerWidth × innerHeight — layout viewport |
| Window (outer) | Full browser window including chrome |
| Screen resolution | Full display from screen.width × height |
| Device pixel ratio | Scale factor for HiDPI / Retina |
Common use cases
- Responsive debugging — confirm which breakpoint is active at your current window width.
- Bug reports — paste exact viewport dimensions when a layout breaks at a specific size.
- Iframe and embed sizing — verify parent viewport when content is nested.
- Mobile emulation — compare real device viewport vs desktop devtools presets.
Best practices
- Resize slowly and watch the headline update — that is the size CSS media queries use.
- Document inner viewport for layout bugs, not screen resolution — see what is my screen resolution for the monitor.
- Combine with what is my device pixel ratio when images look blurry or too sharp.
- For the full environment, open device info.