ReferenceBeginner3-5 min reference
Responsive Testing
Responsive testing confirms the layout holds up from a small phone to a wide desktop — and at the awkward sizes in between. This sheet lists common breakpoints, the viewports worth checking, and what tends to break. It overlaps WCAG reflow and Mobile Testing (linked below); keep this one about layout.
Reference breakpoints
| Band | Width (typical) | Represents |
|---|---|---|
| Small phone | 320–360px | Smallest real devices |
| Phone | 375–414px | Most phones |
| Tablet portrait | 768px | iPad portrait |
| Tablet landscape / small laptop | 1024px | Common breakpoint |
| Desktop | 1280–1440px | Most desktops |
| Wide | 1920px+ | Large monitors |
Breakpoints are app-specific — test the values your CSS actually uses, plus the edges.
What to check at each size
- No horizontal scroll (unless intentional, e.g. a table).
- Content reflows — nothing clipped, overlapping, or cut off (WCAG 1.4.10, at 320px CSS width).
- Tap targets ≥ ~44px and not crowded on touch.
- Images/media scale; no fixed-width overflow.
- Nav collapses sensibly (hamburger) and is operable.
- Text zoom to 200% doesn't break layout (1.4.4).
- Orientation: portrait and landscape on mobile/tablet.
How to test fast
- DevTools device toolbar (
Cmd/Ctrl+Shift+M) — sweep the breakpoints. - Test at zoom 200% as well as small viewports — they catch different bugs.
- Verify on at least one real device; emulation misses touch and font quirks.
Common mistakes
- Testing only the three "design" breakpoints, missing the in-between reflow.
- Fixed pixel widths (
width: 1200px) causing overflow on small screens. - Confirming visuals but never operating the collapsed nav.
- Ignoring landscape and the 200%-zoom reflow case.
// Related resources