viewports
Viewports
This skill renders one page at a fixed set of widths and heights. It measures each render for sideways scroll, clipped text, small targets and controls that only hover reveals.
Every width rendered, none inferred
The widths are exact: 320, 375, 768, 1024 and 1440, plus 1px either side of each project breakpoint. A width reasoned from the media queries is a finding. Run it after any layout change and whenever the user names a phone or a width.
Opening the result belongs to verify. Alignment inside one render belongs to alignment. Safe areas, hit areas and dynamic viewport units belong to defaults, and a failure there cites its id.
1. Read the breakpoints
Read the breakpoints from the CSS, the Tailwind config or the tokens. Add 1px below and 1px above each one to the fixed widths. A sweep that skips the edges of a breakpoint is viewports-cross-each-breakpoint.
2. Render each width
Set the viewport through device emulation at each width. Use 320×568, 375×812, 768×1024, 1024×768 and 1440×900. Breakpoint edges render 800px tall. Emulate touch at every width under 1024. Take a full-page screenshot of each. A layout judged from the code is viewports-render-every-width.