iPhone Air Screen Size & Viewport

Why this viewport matters

When a user visits your site on the iPhone Air, the browser reports window.innerWidth = 420 and window.devicePixelRatio = 3. Your CSS media queries match against the 420px CSS width, not the 1260 × 2736 physical pixel count of the panel.

At 420px it hits no Tailwind breakpoint (base styles only) and no Bootstrap breakpoint. Rotated to 912px it moves to Tailwind md, so check both orientations.

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

/* iPhone Air: 420×912 CSS px, DPR 3 */
@media (max-width: 420px) {
  /* styles for this width and narrower */
}

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