iPhone Duo (folded) Screen Size & Viewport

Why this viewport matters

When a user visits your site on the iPhone Duo (folded), the browser reports window.innerWidth = 466 and window.devicePixelRatio = 3. Your CSS media queries match against the 466px CSS width, not the 1398 × 2034 physical pixel count of the panel.

At 466px it hits no Tailwind breakpoint (base styles only) and no Bootstrap breakpoint. Rotated to 678px it moves to Tailwind sm, so check both orientations.

For sharp full-width images, serve a source at least 1398px wide (466 CSS px × 3 DPR) through srcset and let the browser pick it.

/* iPhone Duo (folded): 466×678 CSS px, DPR 3 */
@media (max-width: 466px) {
  /* styles for this width and narrower */
}

@media (min-resolution: 3dppx) {
  /* serve high-density assets */
}