iPad Air 13″ (M3 / M4) Screen Size & Viewport

Why this viewport matters

When a user visits your site on the iPad Air 13″ (M3 / M4), the browser reports window.innerWidth = 1024 and window.devicePixelRatio = 2. Your CSS media queries match against the 1024px CSS width, not the 2048 × 2732 physical pixel count of the panel.

At 1024px it hits Tailwind lg (1024px) and Bootstrap lg (992px). Rotated to 1366px it moves to Tailwind xl, so check both orientations.

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

/* iPad Air 13″ (M3 / M4): 1024×1366 CSS px, DPR 2 */
@media (max-width: 1024px) {
  /* styles for this width and narrower */
}

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