Viewport Size Calculator
Quick answer
Enter or read width/height values to reason about layout space in CSS pixels.
For a related estimate, see Browser Info Tool.
Explore further: User Agent Parser · Responsive Viewport Tester
CSS pixels vs hardware pixels
CSS pixels are logical units; hardware pixels depend on `devicePixelRatio`. A “360px wide” layout may span more physical pixels on high-DPR phones.
Explore further: Safe Area Checker · Accessible Color Palette
Viewport size is the inner width and height of the browser window in CSS pixels—the canvas your layout uses. Use it when you are tuning breakpoints, reproducing bugs, or matching Figma frames to the browser. See also Screen resolution checker for a related utility in this cluster.
How to use this calculator
- Open the tool: Set your window to the scenario you care about.
- Tune inputs: Read inner width/height from the tool output.
- Read the output: Map values to your breakpoint table or component tests.
Real-world examples
- Breakpoint check: If your design switches at 768px, confirm the reported inner width crosses that threshold with actual scrollbars present.
- Zoom: Browser zoom changes CSS pixel counts—always test at 100% and at user zoom levels for accessibility.
Tips & gotchas
Scrollbars eat a few pixels of width on some platforms—don’t hard-code “exactly 768” without padding.
FAQ
Does this include the devtools dock?
It reflects the layout viewport as exposed to the page—devtools layout can shrink the content area.
Does this tool send my text to a server?
Calciverse runs in your browser; we do not store your inputs on our servers for these utilities. Anything that uses network APIs (for example DNS lookup) only sends what you explicitly request.
Why do results differ from another site?
Rounding, defaults, and implementation details (color spaces, tokenizers, DNS resolvers) can differ. Compare definitions, not just the headline number.