responsive design tester

How to use the responsive design tester

  1. Enter the URL you want to test — public pages only.
  2. Pick from 20+ device presets — iPhone 15, iPad Pro, Pixel 8, common Android, common desktop widths — or enter custom dimensions.
  3. All device frames render side-by-side in a grid. Scroll any one frame to see the page at that viewport's height.
  4. Toggle sync scroll to scroll every frame at once for rapid cross-viewport QA.
  5. Capture full-page screenshots of every viewport as a single zip for design handoff or stakeholder review.

When to use it

DevTools device mode is fine for checking one viewport at a time during development. The responsive tester is faster when you need to see five or more breakpoints simultaneously — QA pass before a release, design review, or debugging a layout that breaks only on certain screens. Use real devices for final testing: emulators can't reproduce touch targets, system font differences, or mobile browser quirks. Alternative: BrowserStack covers real-device testing across iOS and Android fleets but is a paid service; use this tool for same-day sanity checks.

Example

Test a pricing page across iPhone SE (375px), iPhone 15 Pro (393px), iPad Mini (744px), iPad Pro (1024px), and a 1440px desktop. Typical finding: pricing cards wrap to 2 columns at 744px but have excessive whitespace, suggesting a 3-column breakpoint should kick in earlier.

Frequently asked questions

Does this test actual mobile browsers or just viewport sizes?
It renders in Chrome at the specified viewport. Mobile browser differences (Safari iOS rendering quirks, Android WebView behavior) aren't reproduced — use real devices for final QA.
Can I test my localhost site?
Only if your localhost is accessible to the internet (e.g., via ngrok or a tunnel). The tester runs server-side and can't reach localhost on your machine.
Why do some sites block the preview?
Sites with strict X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors headers can't be framed. Use DevTools or a real device for those.
How accurate is the device frame?
Exact pixel dimensions and device pixel ratio — so a 1x CSS background looks the same as on the real device. System fonts and dynamic viewport behavior (dvh, svh) still use desktop browser defaults.
Can I save sessions or share links?
Yes — sharable URLs encode the target site and selected viewports so a teammate sees the same configuration.

Related tools

Last updated: 2026-04-22