Responsive design guide
Responsive Viewport Sizes: What Widths Should You Test?
The best viewport list is small enough to run every release and wide enough to catch the breakpoints where real layouts fail.
The practical viewport set
Start with these five ranges before you make a custom QA matrix. They cover the places where navigation, cards, forms, screenshots, and dashboards usually break.
Small mobile
360 to 390px
Catches cramped navigation, two-line buttons, and narrow checkout forms.
Large mobile
412 to 430px
Covers modern iPhones and Android phones without pretending every phone is the same.
Tablet
768 to 820px
Shows whether the layout should stay mobile, move to columns, or use a tablet-specific state.
Laptop
1280 to 1440px
The daily-driver desktop range where dashboards, navs, and marketing pages need to feel finished.
Wide desktop
1536 to 1920px
Finds oversized line lengths, empty hero areas, and content that stops scaling gracefully.
How to choose extra widths
Add a viewport when content breaks, not because another device exists. Test widths around your CSS breakpoints, then keep the list short enough that the team actually runs it.
- Start with one narrow mobile width before adding breakpoint CSS.
- Test just below and just above each important breakpoint.
- Compare logged-out, logged-in, loading, empty, and error states.
- Check sticky headers, cookie notices, support widgets, and popups on the first fold.
- Take screenshots before a release so visual regressions have a baseline.
Where the bugs hide
Navigation that wraps between 390px and 430px.
Cards that become too wide on tablets but too cramped on phones.
Fixed sidebars, chat widgets, and cookie banners that cover calls to action.
Desktop dashboards that leave columns unreadable below 1280px.
Turn the list into an actual QA pass
Use the free viewport checker for a quick breakpoint report, then open the same site in Sizzy when you need synchronized scrolling, screenshots, and real pages.
What viewport sizes should I test for responsive design?
Test at least one small mobile width, one large mobile width, one tablet width, one laptop width, and one wide desktop width. Then add widths around the breakpoints used by your CSS framework.
Should I test real devices or viewport sizes?
Use viewport sizes to catch layout problems quickly, then test real devices for browser behavior, touch input, device pixel ratio, and performance.
How many responsive breakpoints does a website need?
Most websites can start with mobile, tablet, laptop, and wide desktop ranges. Add custom breakpoints only when real content breaks between those ranges.