How the tester works
Every frame is laid out at the device’s real width in CSS pixels — 393 for an iPhone 16, 820 for an iPad — and then scaled down so they all fit side by side. Because the page really is that wide, its media queries fire exactly as they would on the device: navigation collapses, columns stack, and images swap where the site says they should.
What a frame can’t fake is the rest of the device: touch, the notch, the browser’s own toolbars, and the browser’s name. Use it to catch layout problems fast, then confirm on a real phone.
Screen sizes worth knowing
| Device | CSS size, portrait |
|---|---|
| iPhone SE | 375 × 667 |
| iPhone 16 | 393 × 852 |
| iPhone 16 Pro Max | 440 × 956 |
| Most Android phones | 360–412 wide |
| iPad mini | 744 × 1133 |
| iPad | 820 × 1180 |
| iPad Pro 13″ | 1032 × 1376 |
| MacBook Air 13″ | 1470 × 956 |
| 1080p monitor | 1920 × 1080 |
Breakpoints to check
Most layouts change at a handful of widths. Tailwind’s defaults are a good map of where:
sm 640px large phones, landscape
md 768px tablets, portrait
lg 1024px tablets landscape, small laptops
xl 1280px laptops
2xl 1536px large screensBugs live just either side of them. If a page breaks, it’s usually at 1–2 pixels below a breakpoint, where one layout has almost run out of room before the next takes over.
Seeing every size while you build
A tester is for a quick look. When you’re building, you want the phone and desktop views open all the time, beside the design and the docs. In Tabula every site is a live tile you can size however you like — drag one to phone width and it reflows like a phone — so the whole set stays in view while you work. The multi-site viewer gives you a taste of it here.
Questions
Is this the same as testing on a real phone?
For layout, very nearly: each frame is exactly as wide as the device, so every media query behaves the same. What it can’t reproduce is the rest of the phone — touch instead of hover, the notch and toolbars, and a site that reads the browser’s name. Check the final result on a real device before you ship.
Why does a site show its desktop version in the phone frame?
Some sites decide on their server which version to send, from the browser’s name rather than the screen’s width. The frames here are still your desktop browser, so those sites send the desktop page. Sites built with responsive CSS, which is most of them now, adapt properly.
Can I test a site running on localhost?
Not here — the tool checks each address from our server first, and our server can’t see your computer. Use your browser’s device mode (in Chrome, open DevTools with Command-Option-I and press Command-Shift-M), or share the dev server with a tunnel and paste that address.
What is a CSS pixel?
The unit web layouts are measured in. A phone with three physical pixels for every CSS pixel — an iPhone 16 is 1179 physical pixels wide — lays pages out as if it were 393 wide. That 393 is what media queries see, and what this tool uses.
Why won’t my own site load in the frames?
Your site probably forbids framing with an X-Frame-Options or Content-Security-Policy header, which is a sensible default. The embed checker shows which one; to test here, allow framing on a staging copy.