iPhone Air: tamaño del viewport

Son píxeles CSS (de maquetación), los tamaños del marco de Mobile Preview. En un dispositivo real pueden variar un poco según la interfaz del navegador, el zoom de pantalla o la versión del sistema.

Es mejor usar breakpoints basados en tu contenido que reglas por dispositivo. Si necesitas reproducir este tamaño exacto, por ejemplo para depurar un diseño, esta media query lo selecciona en vertical:

@media (width: 420px) and (height: 912px) {
  /* iPhone Air, vertical */
}

El recorte (Dynamic Island) invade la parte superior de la pantalla en diseños a pantalla completa. Añade viewport-fit=cover a tu meta viewport y aplica padding con env(safe-area-inset-top) a las cabeceras fijas para que nada quede detrás.

El marco iPhone Air forma parte de Mobile Preview Pro (6,99 €, pago único, sin suscripción). La versión gratuita incluye el iPhone 16, el iPhone 17 y el iPhone 17 Pro Max. Instala la extensión, arranca tu servidor de desarrollo, ejecuta «Mobile Preview: Show» y elige iPhone Air en el menú de dispositivos: tu página aparece en el marco junto a tu código y se recarga al guardar.

Instalar Mobile Preview · Guía paso a paso (en inglés)

• iPhone 11 (414 × 896)
• iPhone 15 Pro Max (430 × 932)
• iPhone 16 Pro (402 × 874)
• iPhone 16 Pro Max (440 × 956)
• iPhone 17 (402 × 874)
• iPhone 17 Pro (402 × 874)

¿Cuál es el tamaño del viewport del iPhone Air en píxeles CSS?

420 × 912 en vertical (ancho × alto) y 912 × 420 en horizontal, según usa Mobile Preview. La pantalla física tiene más píxeles; los píxeles CSS son lo que ve tu diseño.

¿En qué breakpoint de Tailwind está el iPhone Air?

Con los breakpoints por defecto de Tailwind, el iPhone Air está por debajo de sm (menos de 640 px) en vertical y md (desde 768 px) en horizontal.

¿Puedo previsualizar mi sitio en el iPhone Air dentro de VS Code?

Sí. El marco iPhone Air forma parte de Mobile Preview Pro (6,99 €, pago único). La versión gratuita incluye el iPhone 16, el iPhone 17 y el iPhone 17 Pro Max.