DEVICESCOPEDEV TOOL · WEB APP● IN PROGRESS

Test any website on every device, under real settings

DeviceScope showing this portfolio on phones, a tablet and a laptop

Paste a link to any website or web app. See it live on phones, tablets and laptops side by side, with real settings like big text and dark mode, and find the layout problems.

Most responsive checks only change the screen width. Real people also make text bigger, change display size, use dark mode or turn off motion, and those settings break layouts. DeviceScope is a tool I'm building to test all of that at once. Every screen on this page is DeviceScope running on this portfolio.

STATUS● IN PROGRESS

ROLE: Designer and builder (personal project)
TIMELINE: Oct 2026, in progress
PLATFORM: Web app
TOOLS: React, TypeScript, Playwright, Claude Code
TRY IT: Not public yet Build status →

PROBLEM

Phones change more than the width

Browser dev tools let you drag the window narrower. But a phone set to large text, or a bigger display size, is a different screen. Headings run off the edge, buttons overlap, and fixed bars cover half the page.

Nobody owns every phone to check this. The tools that exist show one device at a time, and most of them skip these settings completely.

WIDTH IS NOT ENOUGHText size, display size, dark mode and reduced motion break layouts that pass a width check.

ONE DEVICE AT A TIMEChecking each phone, tablet and laptop means a separate run every time.

HARD TO SHOWFreelancers and studios have no simple way to show a client what breaks and where.

HOW MIGHT WE

How might we let anyone see a site on every device and phone setting at once, and find what breaks before their users do?

WHAT IT DOES

Live devices, real conditions, then a scan

01 · LIVE AND IN SYNCScroll, tap or type on one device and the others follow.

02 · REAL CONDITIONSText size, display size, light or dark, reduced motion and rotation, on every device at once.

03 · SCANChecks the pages for sideways scroll, cut off or overlapping text, small tap targets and tiny text.

04 · REPORTOne file with every problem and a marked picture of it, ready to send to a client.

This portfolio at 200% text in DeviceScope — 01 · This portfolio at 200% text. On the phones, the hero heading runs past the edges.

DeviceScope scan results on this portfolio — 02 · Click a problem from the scan and it's marked on the live device.

DeviceScope breakpoints on this portfolio — 03 · The breakpoint finder shows the widths where each problem starts and stops.

REPORT

A report you can send

One file that opens offline. Each problem lists the device, the page, when it shows up and the element, with a marked picture.

DeviceScope report for this portfolio — 01 · The report for this portfolio.

HONEST LIMITS · Every device renders with Chromium, so Safari on iPhone can differ. Text size and display size are close simulations, not exact.

STATUS AND PLAN

Still being built

Now: a first working version, tuning the scanner so it raises fewer false alarms.
Next: many more devices at once, running on a server, so anyone can try it from the browser.

LATER

SHARESend a link, and clients pin comments on each device.

MORE BROWSERSSafari's engine and Firefox next to Chromium.

REAL ANDROIDA real Android phone with its own font and display settings.