Back to all steps

Mobile layout check

Comprehensive mobile layout assertion: <meta name="viewport"> presence, no horizontal scroll, no elements overflowing the viewport, no tiny tap-targets (<32px). Does not change viewport size — put «Set viewport size» with a mobile size (e.g. 375×812) before this step.

Usage example

A comprehensive “Mobile layout check” — replaces several separate steps with one. In a single run it checks:

the presence of <meta name="viewport"> in the <head>;
no horizontal document scroll (scrollWidth − clientWidth ≤ 1px);
that no visible element extends past the right edge of the window (getBoundingClientRect().right ≤ innerWidth);
that interactive elements (links, buttons, fields, [role=button], elements with onclick) are at least 32×32 px — otherwise it is hard to hit them with a finger.

No fields required.

Important: the step does not change the window size. Put a “Set viewport size” before it with the value 375|812 (or another mobile profile) — otherwise the check runs on the desktop layout and loses its meaning.

The error message lists the specific problems: selectors of overflowing elements with the overflow amount in pixels and a list of small touch targets with their sizes. This goes into the AI failure analyzer and into the step card in the report.

Typical scenario:

Go to page — https://mysite.com
Set viewport size — 375|812
Reload page
Mobile layout check