iPhone Duo (unfolded) Screen Size & Viewport

Why this viewport matters

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

At 890px it hits Tailwind md (768px) and Bootstrap md (768px). Rotated to 626px it moves to still no Tailwind breakpoint, so check both orientations.

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

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

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