duo-check

Detect responsive design problems at foldable and other unusual viewport widths, starting with the iPhone Duo, from the command line.

npx duo-check https://example.com

Not another resizable-iframe viewer. duo-check loads your page in headless Chromium at a set of viewport widths and reports concrete problems:

• Horizontal overflow: content wider than the viewport
• Fixed-width elements: width: 600px that doesn't fit a narrow screen
• Navigation wrap: nav items spilling onto multiple rows
• Long line length: text running past ~80 characters per line

iPhone Duo / viewport compatibility

✗ duo-closed   344 × 774
    ✗ [HIGH] Horizontal overflow: page is 616px wide in a 344px viewport (widest offender: div.video, 600px)
    ⚠ [MED]  Fixed width detected: div.video { width: 600px } exceeds 344px viewport
    ⚠ [MED]  Navigation wraps: nav has 9 items wrapping onto 2 rows at 344px

Summary: 1 high, 2 medium, 0 low severity issue(s)

Exits with a non-zero status when any HIGH-severity issue is found, so it can gate CI:

- run: npx duo-check https://mywebsite.com

⚠ About the "duo-*" presets

Apple announced the iPhone Duo on 9 Sept 2026 (ships 23 Oct 2026), but has not published the device's actual CSS viewport dimensions (window.innerWidth/innerHeight). The duo-closed and duo-open presets in src/presets.ts are estimates derived from leaked physical resolutions — treat them as a starting point, not ground truth, until real device or simulator data is available. They'll be updated here once confirmed.

The other presets (320, 768, 1024) don't depend on Duo specifics at all and are useful regardless.

Try it without a real URL

examples/broken.html and examples/fixed.html are the same page — one with each of the four issue types above, the other with each one fixed (scrollable nav instead of wrapping, a capped instead of hardcoded video width, max-width: 70ch on the paragraph). Diff the two files to see exactly what changed.

Local HTML files work directly, no server needed:

git clone https://github.com/uguratmaca/duo-check.git
cd duo-check
npm install && npm run build

node dist/cli.js examples/broken.html   # reports 2 high, 4 medium, 2 low
node dist/cli.js examples/fixed.html    # clean, exit code 0

Usage

duo-check <url-or-local-file> [options]

Options:
  -p, --presets <names>  comma-separated preset names or widths (default: all built-in presets)
  --width <n>             test a single custom width (px)
  --height <n>            height to pair with --width (px)
  --json                  machine-readable output

Examples:

npx duo-check https://example.com
npx duo-check https://example.com --presets duo-open,1024
npx duo-check https://example.com --width 540 --height 720
npx duo-check https://example.com --json > report.json

Requires Node.js 18+. duo-check depends on Playwright, which downloads a Chromium build on first npm install (no extra setup step needed, but expect that install to take a bit longer and pull down a few hundred MB).

Programmatic usage

The four detectors are also published as a dependency-free engine, importable on its own for embedding elsewhere (e.g. a browser extension content script) without pulling in Playwright or Node:

import { detectOverflow, detectFixedWidth, detectNavWrap, detectLineLength } from "duo-check/engine";

// each function runs directly in a browser context and returns Issue[]
const issues = detectOverflow(window.innerWidth);

See src/engine/index.ts for the full exported surface.

Development

npm install
npm run build
node dist/cli.js <url>

License

MIT