A Phone Is Not a Smaller Desktop: Mobile QA for Interactive Works
A hands-on mobile QA routine for browser games, canvas experiments, and AI-made tools, focused on controls, keyboards, safe areas, orientation, and recovery.
A responsive screenshot can prove that boxes fit. It cannot prove that a thumb can reach a control, that the keyboard leaves enough room to read the result, or that a canvas recovers after the phone rotates. Interactive pages fail on mobile through behavior as often as layout.
Our mobile pass uses a real phone for the final check, but most problems can be found earlier with a narrow browser window and deliberate stress cases. The important part is to complete the actual workflow, not admire the first screen.
Start with reach, not breakpoints
A control can fit perfectly and still be awkward under a thumb. We check whether the main action can be reached while holding the phone naturally, whether nearby destructive actions are separated, and whether pressed states are visible under a finger.
For games, keyboard instructions should disappear or adapt when touch is the only input. For tools, the submit action should remain findable after a long field expands and the keyboard shifts the viewport.
Open the keyboard early
The on-screen keyboard is a layout event. It reduces the viewport, can cover fixed buttons, and often scrolls the focused field into an unexpected position. We type the maximum realistic input, move between fields, dismiss the keyboard, and submit without manually repairing the scroll position.
A sticky action bar needs particular care. If it sits above the keyboard, it can consume half the remaining screen. If it stays behind the keyboard, the visitor may think the page has no next step.
- Focus the first and last fields.
- Paste text longer than the default sample.
- Dismiss the keyboard using the device control.
- Confirm the result heading is visible after submit.
Canvas and orientation
Canvas works should be rotated during motion. We look for stretched drawing, lost state, duplicated animation loops, and controls that move away from the visible scene. A redraw after resize should use the new dimensions without resetting the user's choices unless that reset is explained.
Landscape does not need to be the primary mode, but it should fail deliberately. A short rotate back message is better than controls overlapping the scene or an invisible canvas consuming touch events.
The slow reload test
On a slower connection, text and controls may appear before a large script or font. We reload from the public URL and watch whether the page shifts under a finger, whether an eager tap is ignored, and whether the loading state resembles the final layout.
The pass ends after retry, restart, or export. Those secondary actions are often placed last in the desktop design and become the first casualties of a narrow screen. A visitor who completes the work deserves a clean way to continue.
| Moment | Common failure | Pass condition |
|---|---|---|
| Input | Keyboard covers action | Submit remains reachable |
| Rotate | Canvas stretches or resets | State survives or reset is explained |
| Load | Layout shifts under touch | Stable controls and visible progress |
| Finish | Retry or export is off-screen | Next action is obvious |