How does your site look on iPhone SE, iPad and a 4K monitor?
Paste a URL, hit "Load", pick a viewport preset from the chip bar (iPhone SE 375×667, iPhone 14 Pro 393×852, iPad 768×1024, laptop 1280×800, FullHD 1920×1080), or drag the two sliders to dial in any exact pixel size (320-2560 wide, 480-1440 tall). The page renders inside an iframe with that precise width and height.
This is a browser-rendered preview, not a device emulator. Your browser's engine (Chrome, Firefox, Safari) does the rendering, so CSS, fonts and layouts behave the same as on a real screen of that size. You don't get touch events, you don't simulate a phone's RAM cap, you can't trigger `window.matchMedia('(hover: none)')` - for those, use Chrome DevTools or Firefox's responsive mode.
Perfect for quickly checking breakpoints during code review, demoing to a client at three sizes side-by-side, or verifying the new hero in the design system doesn't break at 375 px.
How to use it
- Paste the full URL of the page at the top (e.g. `https://your-site.com/landing`). You can skip the `https://` scheme - we add it.
- Click "Load" or press Enter. The page loads straight from the target server into the iframe - no proxy in the middle.
- Pick a device preset from the chip bar (iPhone SE / iPhone 14 / iPad / Desktop / FullHD) or use the two sliders for a custom size.
- Current dimensions show live in the top right (e.g. `390 × 844`). Click "Rotate" to swap width and height (portrait ↔ landscape).
- Click "Refresh" to force-reload the iframe (useful after deploying a new build). "Open in new tab" opens the page at full size.
- Click "Copy link" to put a preview URL with `?url=...&w=...&h=...` on your clipboard - share it with a teammate and they'll get the exact same preview.
- If you see a red "Site blocks embedding" card, the target server sent `X-Frame-Options: DENY/SAMEORIGIN` or `Content-Security-Policy: frame-ancestors`. Open the site in a new tab instead - the browser will render it normally there.
When this is useful
Seven typical situations where a quick responsive check beats reaching for DevTools:
- Reviewing a new component PR. A junior pushes a new hero - you check in 30 seconds whether it works on iPhone SE (the smallest phone still in use), iPad and laptop. No need to clone the repo.
- Demo to a client. Zoom call, you open three tabs of this tool with different presets and show the same page on desktop, tablet and phone simultaneously. The client sees everything works.
- QA bug reproduction. A tester reported "the menu breaks at 412 px wide". You dial in exactly 412 on the slider, repro the bug, screenshot it, attach to the Jira ticket.
- Checking the competition. A designer wants to see how a competitor's site looks at 4K (1920×1080) and on a Galaxy S22 (360×800). Paste URL, click preset, done.
- Validating a landing page before a Google Ads campaign. Ad approval requires "mobile-friendly". You verify at 375 px that the CTA is visible without scrolling and fonts aren't smaller than 16 px.
- Checking a site from a phone view while you're on your computer. Get the 375×667 preview without pulling out your phone and without deploying to staging.
- Post-deploy sanity check. You shipped 2.3.0 to prod - check three sizes that nothing broke. "Refresh" loads the fresh version (HTML cache busted, but CDN assets may persist).
After checking the layout, also verify how the link looks on social media - use the OpenGraph preview. And check SSL (SSL certificate inspector) and DNS (DNS lookup) - when a page loads slowly or not at all, the issue usually lives there.