Accessibility — zoom and reflow
Browser Zoom Viewport Calculator
Estimate how much CSS layout space remains after browser page zoom. Use the result to choose a test viewport, then inspect the real page for clipping, overlap, and missing controls.
Bottom line: Divide each viewport dimension by the zoom factor. A 1,280 × 1,024 viewport at 200% is approximately 640 × 512 CSS pixels; at 400% it is approximately 320 × 256.
Calculate an equivalent viewport
Equivalent viewport: 640 × 512 CSS pixels at 200% zoom.
Device presets
Start from a familiar screen
Select a preset to fill the calculator, or reflow test at 320 CSS px (the WCAG 400% reference) with one click.
Presets are starting points. Browser chrome, OS scaling, and dynamic mobile toolbars change the real visible viewport.
How to use the result
The calculation is a test setup, not a pass result. Resize developer tools to the equivalent width or use real browser page zoom. Then check that text remains readable, controls are operable, focus is visible, and the document does not require two-dimensional scrolling.
Common reference points
| Starting viewport | Page zoom | Approximate CSS viewport | Useful check |
|---|---|---|---|
| 1,280 × 1,024 | 100% | 1,280 × 1,024 | Desktop baseline |
| 1,280 × 1,024 | 200% | 640 × 512 | Large text and responsive wrapping |
| 1,280 × 1,024 | 400% | 320 × 256 | WCAG reflow reference width |
| 390 × 844 | 100% | 390 × 844 | Common narrow mobile layout |
| 320 × 568 | 100% | 320 × 568 | Small mobile layout |
Checks the calculator cannot perform
- It cannot detect horizontal overflow, clipped dialogs, sticky controls, or content hidden by a game canvas.
- It does not account for browser chrome, operating-system scaling, or a mobile browser’s dynamic address bar.
- It does not replace keyboard, screen-reader, orientation, or physical-device testing.
FAQ — Zoom Viewport Calculator
What is an equivalent CSS viewport?
It is the approximate layout viewport after browser page zoom. For example, a 1,280-pixel-wide viewport at 200% page zoom provides about 640 CSS pixels of layout width.
Is the CSS zoom property the same as browser page zoom?
No. The CSS zoom property scales an element inside a page but does not reproduce every effect of browser page zoom. Responsive testing should use browser zoom or an equivalent viewport size.
Why is 320 CSS pixels included?
WCAG reflow evaluation commonly uses 1,280 CSS pixels at 400% zoom, which is equivalent to 320 CSS pixels of width. A page still needs manual checks because a calculator cannot detect clipping or lost controls.
Embed this tool
<iframe src="https://nocharge.net/tools/zoom-visualizer/" width="400" height="560" title="Browser zoom viewport calculator"></iframe>
<p>Source: <a href="https://nocharge.net/tools/zoom-visualizer/">NoCharge zoom viewport calculator</a></p>Next action
Calculate the target size, test the actual page at that width, and record any control or content that becomes clipped or unreachable.