Free iPhone Duo Website Viewport Tester

466 × 678 CSS pixels folded, and 890 × 626 CSS pixels unfolded. Both at a 3× device pixel ratio. Those are the numbers your CSS media queries respond to.

1,398 × 2,034 physical pixels on the outer screen and 2,670 × 1,878 on the inner one. Physical resolution matters for image assets; the CSS viewport is what your layout responds to, and the two are different because of the 3× pixel ratio.

The inner screen has a 1.42 : 1 aspect ratio, so unfolding the phone gives you a short, wide screen rather than a bigger portrait one. Vertical space is scarcer unfolded than folded, which catches out sticky headers and full-height hero sections.

No. Chrome and Edge have supported the API since version 138 in June 2025, Firefox does not support it, and neither does Safari — including on the iPhone Duo itself. Apple shipped a foldable without the web standard for detecting folds, so you cannot ask the browser where the crease is.

Reliably, you do not. Since Safari does not expose viewport segments, the practical approach is to respond to the width you are given: use container queries, recalculate on resize, and make the layout work at any width and aspect ratio rather than branching on a device state.

Folded, 466 px sits below the smallest breakpoint in both Tailwind and Bootstrap, so it gets your base mobile styles. Unfolded, 890 px lands in the medium range in both, so it gets your tablet layout on a device people hold like a phone.

Yes — that is what this tool is for. Rendering a site at the device's exact viewport catches nearly every layout problem. What it cannot reproduce is iOS Safari's own behaviour, so treat it as a thorough layout check rather than a full device test.

It is a viewport tester, which is an honest distinction worth making. A simulator runs the device's operating system and browser engine. This renders your site at the device's exact dimensions in your own browser, which answers layout questions quickly and does not answer platform ones.

Not as a built-in at the time of writing, though you can add a custom device with these dimensions under Device Toolbar → Edit → Add custom device. Use 466 × 678 and 890 × 626, both at a device pixel ratio of 3.

It is how many physical pixels the screen uses to draw one CSS pixel. At 3×, a 100 px-wide image slot is painted with 300 physical pixels, so a 100 px image looks soft. Export at two or three times the display size, or use an SVG, and let srcset pick.

Because 466 px and 890 px fall either side of your breakpoints. That is your CSS doing what it was told. The question this tool answers is whether the result is what you intended at each width.

Almost never. A layout that genuinely responds to its container handles a foldable without any device-specific work. Separate designs are how you end up maintaining a special case for every new shape that ships.

Many sites send a header telling browsers not to display them inside another page. That is a sensible security measure against clickjacking, and it cannot be bypassed. The “Open in a window this size” button gets you the same dimensions in a real window.

The Galaxy Z Fold 7 inner screen at 984 × 1,092, the Pixel 10 Pro Fold cover screen at 412 × 901, the iPhone 15/16 Pro, the iPhone Pro Max, the iPhone SE, an 11-inch iPad and a 1440 × 900 laptop. Only states with published specifications are included — an invented viewport is worse than a missing one, because you would design against it.

Yes. The device list runs from a 375 px iPhone SE up to a 1440 px laptop, with an iPad and the Android foldables in between, so you can check how a page responds across the widths that matter without installing anything. The foldable is what it was built for; the rest is the same job at other sizes.

Type the address, pick a device and look. The page is rendered at that device's real CSS viewport rather than a rough guess, so what you see is what the layout does at that width. Switching device re-renders it at the new size immediately.

It checks one thing: how your site lays out at real device sizes. It does not check speed, broken links, SEO, uptime or security — those need different tools, and a tool claiming to do all of them usually does none of them well.

No, and the two are worth using together. Google's test gives a pass or fail against its own criteria. This shows you the page at a real device width so you can see what is actually wrong, which is the part a pass-or-fail result cannot tell you.

A tool that renders your website at a set of device widths so you can see how the layout responds. It answers questions a desktop browser window cannot — exact device viewports, the right pixel ratio, and in this case a folding screen with two of them.

No. It runs in the browser you are already using, with no account, no extension and no download. The one thing it needs is a publicly reachable address for the site you want to check.

Roughly 1 : 1.45 folded and 1.42 : 1 unfolded. For comparison, a normal modern iPhone is around 1 : 2.16, so the folded state is noticeably stubbier than the phone shape most layouts were designed against.

No. The inner screen is 7.58 inches against the iPad mini's 8.3, and it reports 890 CSS pixels across rather than the mini's 744. It is closer to a small tablet than to a phone in width, while still being held and tapped like a phone.

Better not to. Device-width media queries are a maintenance debt — every new phone shape means revisiting them. Build layouts that work at any width, and use this tester to confirm that 466 px and 890 px are among the widths that work.

Check rather than guess. In Google Analytics, look at screen resolution under Tech details, or add screen width as a secondary dimension. Foldables are a small share of traffic for most sites, but they skew towards people who buy new phones, which for some businesses is exactly the audience that matters.

There is a physical crease down the centre of the inner screen. It does not split the display into two viewports — the page still sees one continuous 890 px canvas — but content sitting on it can be harder to read at an angle. The marker in this tester shows you where it falls.

CSS pixels are the units your stylesheet works in and what media queries measure. Physical pixels are the dots on the panel. The iPhone Duo packs three physical pixels into each CSS pixel in both directions, which is why a 466 px-wide viewport sits on a 1,398 px-wide screen.

Only if it is reachable at a public address. A local development server on your own machine is not visible to this page. Use a tunnel service to expose it, deploy to a staging URL, or use your browser's own responsive mode with the dimensions from the table above.

Safari's Develop menu offers a fixed set of Apple devices rather than custom sizes, so the practical route is Chrome's Device Toolbar, where you can add a custom device at 466 × 678 and another at 890 × 626, both at a pixel ratio of 3.

The viewport a device reports does not change with a software update, so these hold for this hardware. A future foldable will report something else, which is the argument for layouts that respond to width rather than to a device list.

No. The address is used to load the preview in your browser and nothing else. There is no account, no analytics on what you test and no history kept.