Viewport width vs device pixel ratio: what your layout responds to
"The iPhone 16 is 1179 pixels wide" and "the iPhone 16 is 393 pixels wide" are both true. They're different pixels. Knowing which one your layout responds to is most of the confusion gone.
Two kinds of pixel
- Hardware (physical) pixels — the actual dots on the panel. iPhone 16: 1179 × 2556.
- CSS pixels — the coordinate system your stylesheet uses. iPhone 16: 393 × 852.
The ratio between them is the device pixel ratio (DPR). iPhone 16 has a DPR of 3: every CSS pixel is a 3×3 block of hardware pixels. Most Android flagships are DPR 2.5–3.5; laptops are 1 or 2.
Your layout only sees CSS pixels
Media queries, width, vw, rem, flexbox, grid, clamp() — all of it operates in CSS pixels. @media (max-width: 400px) matches the iPhone 16 because its CSS width is 393, not because of anything to do with 1179. So to check whether a layout is correct on a device, you need to render it at that device's CSS viewport size. That's exactly what a viewport-accurate preview does.
/* This matches iPhone 16 (CSS width 393) */
@media (max-width: 400px) { /* ... */ }
/* DPR is queried separately, and rarely needed for layout */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) { /* hi-dpi asset swaps */ }Where DPR actually matters
- Raster images. A logo displayed at 200 CSS px on a DPR-3 phone needs a 600px source to look sharp. Use
srcset/image-set(). - Canvas and charts. Scale the backing store by
devicePixelRatioor everything looks fuzzy. - Hairlines. A "1px" border is 2–3 hardware pixels; sub-pixel borders need the DPR media query or a
transform: scale()trick.
None of those change where elements go — only how crisp they render. So they're a real-device or DPR-media-query check, not a layout check.
Why a preview tool that matches the viewport is enough for layout QA
If ViewOnPhone renders example.com in a 393 × 852 frame with an iPhone User-Agent, you're seeing the same box model, the same media queries, the same wrapping and overflow that a real iPhone 16 produces. The frame around it is cosmetic. What you're testing — does the content fit, does the nav collapse, does anything scroll sideways — is fully reproduced.
Keep a real device for image sharpness, scroll feel and Safari's viewport-height games. Use the preview for everything layout.