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

Why this viewport matters

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

At 820px it hits Tailwind md (768px) and Bootstrap md (768px). Rotated to 1180px it moves to Tailwind lg, so check both orientations.

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

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

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