RESPONSIVE VIEWPORT COVERAGE
Test the width range, not every device name.
A short set of representative CSS viewport sizes finds more responsive failures than a long list of nearly identical phones. Start with the supported width range, then add exact devices only when product analytics or a reported issue requires them.
CSS viewport size is not physical screen resolution
Manufacturers publish physical pixel dimensions such as 1080 × 2400. Browsers usually lay out a page in CSS pixels after applying device pixel ratio and browser interface constraints. Responsive media queries react to the CSS viewport, not directly to the panel’s physical pixel count.
That is why two phones with different high-resolution displays can expose similar browser widths, while a foldable can change dramatically between folded and unfolded states.
A practical baseline viewport set
| Category | Useful starting width | Primary risk |
|---|---|---|
| Compact phone | 320–360 CSS px | Overflow, wrapping, minimum touch space |
| Common phone | 375–430 CSS px | Mobile navigation and content hierarchy |
| Small tablet | 600–768 CSS px | Breakpoint gaps and awkward intermediate layouts |
| Large tablet | 820–1024 CSS px | Two-column transitions and landscape behavior |
| Laptop | 1280–1440 CSS px | Desktop density and limited vertical space |
| Wide desktop | 1600 CSS px and above | Maximum line length and excessive empty space |
These ranges are starting points, not universal breakpoints. The right viewport is the one that exposes your content and layout constraints.
Test immediately around your CSS breakpoints
If navigation changes at 768px, test 767px, 768px, and 769px. Repeat that pattern for major grid, sidebar, and typography transitions. Custom viewports around actual media queries catch off-by-one rules and unintended overlap more reliably than device presets alone.
Include height and orientation
Width controls most responsive layouts, but height reveals sticky headers, cookie banners, bottom navigation, dialogs, and virtual keyboards that consume the visible area. Rotate phone and tablet profiles when landscape changes navigation or content order.
How to choose exact device profiles
- Use analytics to identify important viewport dimensions.
- Add devices named in support reports or bug tickets.
- Include folded and unfolded layouts when your audience uses foldables.
- Keep one compact device to protect the minimum supported width.
- Save a stable release set so results are comparable over time.
A compact phone, common phone, tablet, and laptop create a useful first pass. Add targeted sizes around breakpoints, then document the exact width where the failure begins.