Renders every page at phone and desktop widths and reports the defects a desktop review never sees.
Finds what a desktop review misses: horizontal overflow and the element causing it, text under 12px, tap targets under 44px, contrast below AA.
npm i -D @alokraj68/pagecheck Writing it against this site found four real defects that desktop review had missed, including a hero element that put its status dot on a line of its own.
Getting the measurement right took more care than the fixes. Three classes of false positive had to go before the numbers meant anything: getClientRects returns one rect per inline-block box rather than per line, an animation library leaves each word at its own vertical offset mid-scrub, and stacked block children look like catastrophically short lines. A layout audit that cries wolf gets switched off, and then it catches nothing at all.
Horizontal scroll, and the element causing it. Always a bug.
A wrapped line ending far short of the column. The final line is excluded, because a short last line is normal.
Body copy under 12px.
Interactive controls under 44px, excluding inline links inside a sentence.
Size, leading, weight, measure and contrast against the first painted ancestor background, at 4.5:1 for body and 3:1 for display. Findings group by style rather than by element, so one bad style on four routes is one finding with four routes listed.
Install
npm i -D @alokraj68/pagecheck playwright
npx playwright install chromiumAudit a build, or a live site
npx @alokraj68/pagecheck ./dist
npx @alokraj68/pagecheck https://example.comWhat a finding looks like
=== iPhone SE
/pricing/
OVERFLOW 124px - div.price-table -> 124px past edge
tiny text: 11px - "All prices exclude VAT…"
small tap target: 88x24 - "Compare plans"
=== typography
[mobile] <p> 13px / weight 400 / leading 1.45 / 43 cpl / 7.1:1
13px too small
/pricing/ /about/It is a large download, and most projects that want a layout audit already have it. Bundling it would make the install heavy for everyone to save a line for a few.
Yes. Point it at a URL instead of a directory and it crawls from there. Pointing it at a build directory is the usual CI shape, because it fails before a bad layout deploys.
No. It measures the things that are cheap to measure exactly: size, spacing, contrast ratios and target sizes. Keyboard order, focus handling and screen-reader behaviour need a different tool and a person.