Responsive testing checks whether content and interactions work across changing screen sizes, orientations, input methods and zoom levels.
On this cheat sheet
Viewports and breakpoints
- Start with the smallest and largest supported viewport.
- Test just below, at and just above each breakpoint.
- Drag the responsive viewport slowly to find unexpected jumps.
- Test portrait and landscape.
- Include a narrow phone, tablet, laptop and wide desktop based on real usage.
Do not test only named devices: layout defects often appear between popular presets.
Layout and content
- No unintended horizontal scroll.
- Text, images, tables and code do not clip or overlap.
- Navigation remains available and understandable.
- Modals fit the viewport and their actions remain reachable.
- Sticky headers and footers do not cover content.
- Long names, translations and large values wrap safely.
- Images keep useful proportions and do not hide essential detail.
Interaction
- Touch targets are large and separated enough.
- Hover-only information has a touch and keyboard alternative.
- Menus, carousels, drag actions and gestures work as designed.
- On-screen keyboard does not hide the focused field or submit action.
- Focus order still follows the visual order after layout changes.
- Orientation change keeps state and scroll position when appropriate.
Zoom and text resizing
- Test browser zoom to 200%.
- Test increased text size where supported.
- Check reflow at narrow equivalent widths.
- Confirm essential content and controls remain available.
- Do not rely on disabled pinch zoom.
Device emulation
- Open DevTools device toolbar.
- Select Responsive and enter width and height.
- Test touch, orientation, device pixel ratio and throttling when relevant.
- Capture the exact viewport in the bug report.
- Repeat high-risk flows on real devices.
| Emulation can help with | Real devices are needed for |
|---|---|
| Viewport, media queries, rough touch and network simulation | Actual browser chrome, keyboard, GPU, memory, gestures and device quirks |