This page is open over file://, and a browser will not let a local page frame another local
page. Serve the folder first — npm run dev, or any static server — and open this page from
that address. Everything below will then work.
CSS viewport geometry, exactly. Every breakpoint, media query, reflow, overflow, column collapse and
tap-target size behaves here as it will on a real device of that width, because it is that width —
the page is rendered in a frame set to the device's CSS pixel dimensions, not scaled down from a
desktop render. Touch emulation is on for widths under 900px via the site's own
pointer: coarse rules.
The rendering engine underneath is whatever browser you are running. An iPhone is WebKit; if you are
in Chrome this frame is Blink, and the two differ on font rendering, scroll momentum and a handful of
100vh and sticky-position quirks. It also cannot reproduce
devicePixelRatio, the dynamic toolbar resize on mobile Safari, or real touch and
gesture events.
Trust this for layout, spacing, wrapping, reflow and tap-target size — that is geometry, and geometry
is exact. Confirm anything involving motion, sticky elements, 100vh, or the cinematic canvas
scenes on a real handset before you rely on it. A preview that claims more than it can deliver is worse
than no preview.