Mobile QA Checklist
A rigorous mobile QA pass: layouts, touch, keyboards, and the full core journey on phone-sized screens.
The route
5 steps to Done
- 01
Layout pass at phone widths
Find every layout break at real device sizes.
Preview prompt + verify gate ▾ Hide ▴
Run the mobile layout pass at exactly 375px and 414px using device emulation. For every page and modal, record: horizontal overflow (and the offending element via inspect), overlapping or cut-off content, text below readable size, broken grids/cards, images overflowing, and sticky elements covering content. Produce the per-page issue table. Interact while checking - open menus, expand sections, trigger modals.
- ✓ Both widths checked on every page
- ✓ Overflow sources identified precisely
- ✓ Modals and menus were opened
- 02
Fix layout breaks
Make every page flow correctly in a single column.
Preview prompt + verify gate ▾ Hide ▴
Fix every layout issue from the table. Requirements: kill all horizontal overflow (fluid widths, wrapping, single-column collapses); restack multi-column sections sensibly; scale typography and spacing for small screens; give tables an explicit strategy (own-container scroll or card restack); constrain modals to the viewport with internal scroll. Re-verify each fixed page at 375px showing zero horizontal scroll.
- ✓ Zero horizontal scroll remains
- ✓ Tables have a deliberate mobile strategy
- ✓ Modals fit the viewport
- 03
Touch and gesture pass
Fingers are not cursors - verify tap targets and touch behavior.
Preview prompt + verify gate ▾ Hide ▴
Run the touch pass. Verify: every button, link, icon, and control hits at least 44x44px effective tap area with breathing room from neighbors; hover-only interactions (tooltips, menus, reveals) have tap equivalents; swipe/scroll areas do not fight page scroll; the mobile navigation reaches every destination; nothing important hides behind precise hover states. Fix all violations and list the changes.
- ✓ Tap targets meet 44px with spacing
- ✓ No hover-only functionality remains
- ✓ All destinations reachable via mobile nav
- 04
Keyboard and input pass
The on-screen keyboard breaks more mobile apps than anything else.
Preview prompt + verify gate ▾ Hide ▴
Run the input pass with the on-screen keyboard simulated/considered. Verify: inputs use correct types (email, number, tel) for the right keyboards; focused inputs are not covered by the keyboard (page scrolls to them); submit buttons remain reachable with the keyboard open; validation messages are visible near the field; no zoom-jump on focus (font-size at least 16px on inputs); multi-field forms are navigable field to field. Fix all issues found.
- ✓ Input types match content
- ✓ Focused fields stay visible
- ✓ Submit reachable with keyboard open
- 05
Core journey on mobile
The final proof: complete the app's main task entirely on a phone-sized screen.
Preview prompt + verify gate ▾ Hide ▴
Execute the app's complete core journey at 375px, end to end, as a real user: from landing through the primary value action to the result, including any signup, forms, and confirmations. Record PASS/FAIL per step with friction notes (extra taps, confusing moments, slow loads). Fix all failures, then re-run the journey clean. Deliver the final journey report.
- ✓ The full journey was executed at 375px
- ✓ Failures fixed and journey re-run
- ✓ Friction notes recorded and top ones fixed