Thumb Breaker

Mobile Viewport Audit

Does your site work on phones, or just lie about it? We render your page in a real mobile browser at 375x667 to catch what CSS media queries miss.

What We Test

›
Horizontal overflow detection — viewport width (375px) vs document scrollWidth measurement, offender element identification
›
Touch target sizing (Faultry comfort heuristic) — flags controls under 44x44px in the tested viewport; this is stricter usability guidance, not a formal WCAG minimum
›
Fixed/sticky obstructions — detect elements covering interactive UI (modals, cookie banners, overlays)
›
Consent overlay classification — distinguish cookie banners from blocking overlays
›
iOS zoom trigger detection — input/textarea font-size under 16px that triggers unwanted zoom
›
Viewport meta validation — width=device-width, initial-scale=1 presence check
›
Unresponsive image detection — images wider than viewport without max-width constraints
›
Real mobile rendering — Chromium (Puppeteer) at 375x667 with touch emulation, not CSS-only checks
›
Annotated screenshot capture — visual proof with highlighted offenders saved to R2

Why Mobile Responsiveness Testing Matters

Over 60% of web traffic is mobile, yet many "responsive" sites fail in real mobile browsers. CSS media queries do not catch horizontal overflow from fixed-width elements, tiny controls that are hard to tap, and overlays that trap users. We render your site in a real Chromium browser at 375x667, execute JavaScript, measure actual layout dimensions, detect fixed/sticky obstructions over interactive elements, and capture annotated screenshots. This check is intentionally scoped to one representative phone viewport, not full multi-breakpoint certification.

Framework-Specific Mobile Fixes

When we detect mobile issues, we provide fixes tailored to your stack. For horizontal overflow, we identify the specific offending elements (by selector) and suggest CSS fixes (max-width, overflow-x, box-sizing adjustments). For touch targets, we provide button/link sizing recommendations with framework-appropriate styling patterns. For viewport meta issues, we show exact HTML head configuration. For iOS input zoom, we suggest font-size: 16px with visual size adjustments via padding/height. For unresponsive images, we provide CSS rules (max-width: 100%, height: auto). Every fix includes stack-specific implementation guidance for Tailwind, CSS Modules, styled-components, and framework conventions.