Live Updating

Viewport & Breakpoint Tester

Live viewport dimensions · breakpoint detection · media query checker · device profiles

Live Viewport

—

WIDTH px

—

HEIGHT px

— Aspect Ratio

— Orientation

— Device Pixel Ratio

— Scroll Width

16px Root em

— Screen res

Breakpoint Position

                        Active: —
                    

Device Profiles — Click to Simulate

⚠ Simulation sets CSS variables only — use browser DevTools device mode for true pixel emulation. Useful for checking your breakpoint logic.

Test a Media Query

Paste any @media condition — tested live against your real viewport.

Snap History

No snaps yet — resize and click Snap Size.

Why Viewport Testing Matters

Responsive bugs almost always hide in the gap between what you think the breakpoint is and what the browser actually sees. This tool gives you the exact numbers, framework-mapped breakpoints, and a media query sandbox — all updating live as you resize.