Effective Viewport
What do your visitors see when they first land on your page?
And can they use it comfortably?Type a URL and find out how your page looks in the measured space left by browser UI, docks and the on-screen keyboard.
Every screen is smaller than it claims.
Device specs tell one story. These cards show the viewport your website actually lives in.
A reference catalog, not another platform
Measured viewports from real devices — copy width, height and DPR into DevTools, Figma, or Playwright.
Frontend developers
You're responsible for how the UI feels— not just the breakpoint you've got.
Replace DevTools' default device presets with our measured viewports — width, height and DPR ready to copy. Or run the client's website on the viewport board, see what breaks, and fix it.
Designers
Breakpoints help you design.They don't prove it works in reality.
You design with breakpoints and constraints, but a real device can shrink the space you counted on — and one tight viewport is enough to hurt. Scan the safe viewport size table — device segments measured from real hardware, with worst-case layout viewports after chrome — spot-check with frame sizes from the catalog, or preview on the viewport board.
QA
Make sure nothing is broken— even on the layouts nobody picks first.
Check the website manually on the viewport board, or feed Playwright and Cypress from the public dataset package. Use the curated 30-viewport list to script overflow checks in Playwright or Cypress.
Analytics
See which viewport constraints your traffic actually hits.
Group sessions into pressure buckets to optimize your efforts based on your real audience — not just width, but height as well. Match them to catalog devices worth designing and testing for, and join them with outcome metrics to see how different viewport constraints perform.