Free responsive design tool
Viewport Checker
Convert a width and height into a responsive breakpoint report, CSS helper, and QA checklist before you open the real page in Sizzy.
Current report
393 x 852
Small mobile - Portrait - 0.46:1
Check a viewport
Category
Small mobile
Orientation
Portrait
Aspect ratio
0.46:1
Closest
xs (480px)
CSS helper
Paste this into a scratch file before deciding on a breakpoint.
@media (max-width: 393px) {
/* Small mobile and narrower */
}
@media (min-width: 394px) {
/* Wider than this viewport */
}Responsive QA checklist
- Check navigation at 393px before adding another breakpoint.
- Verify touch targets and form fields in portrait orientation.
- Inspect sticky headers, cookie notices, and chat widgets around the first fold.
- Compare this width against xs (480px) before shipping custom CSS.
- Add one wider test at xs (480px) before declaring the layout done.
Need to test the real page across many sizes?
Use Sizzy when the calculator is done and you need synchronized devices, screenshots, and responsive debugging in one place.
Read the viewport sizes guideGenerate screenshot batchBuild QA checklistFind breakpointsTry Sizzy
What is a viewport checker?
A viewport checker tells you how a width and height map to common responsive breakpoints, device classes, and CSS media queries.
Is this the same as testing in real devices?
No. It is a quick planning tool. Use Sizzy when you need to load the real site across many synchronized viewports.
Which breakpoint system does this use?
The report includes practical web categories and Tailwind-style breakpoint names so it is easy to paste into modern CSS work.