49 dispositivos · Smartphones, tabletas, computadoras y relojes inteligentes
Dispositivos Apple: viewport CSS, densidad y resolución de pantalla
Las características de visualización de los 49 dispositivos Apple referenciados, con para cada uno el ancho sobre el cual resuenan tus media queries, su densidad de píxel y la resolución de su pantalla. 39 de estos dispositivos se prueban directamente en tu navegador.
Smartphones Apple
11 anchos CSS distintos cubren toda la gama: 320, 360, 375, 390, 393, 402, 414, 420, 428, 430 y 440 px. Varios modelos comparten el mismo: validar uno de ellos es suficiente para validar los demás.
| Modelo | Viewport CSS | Densidad | Resolución de pantalla | Diagonal | Año |
|---|---|---|---|---|---|
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6,5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6,1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6,7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5,4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5,4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Computadoras Apple
El ancho dado es el de la ventana del navegador a la escala por defecto del sistema, y no la resolución de la pantalla: es este primer valor el que ven tus media queries.
| Modelo | Viewport CSS | Densidad | Resolución de pantalla | Diagonal | Año |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16,2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9,3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13,3" | 2020 |
Tabletas Apple
Los valores se dan en retrato. En paisaje, ancho y alto se invierten: Apple iPad Mini (6th Gen) pasa de 768 x 1024 a 1024 x 768 píxeles CSS. Tus puntos de ruptura para tabletas deben cubrir ambos.
| Modelo | Viewport CSS (retrato) | Densidad | Resolución de pantalla | Diagonal | Año |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7,9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9,7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
Relojes inteligentes Apple
El navegador de estos relojes solo muestra una columna: el ancho es la única medida que cuenta, y es más estrecho que el de todos los teléfonos del parque.
| Modelo | Viewport CSS | Densidad | Resolución de pantalla | Diagonal | Año |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1,6" | 2020 |
Qué anchos probar en prioridad
Los anchos más representados de la gama son 320, 375, 390 y 414 px. Verificarlos primero cubre 25 de los 49 modelos Apple referenciados, y es sobre ellos que deben caer tus primeros puntos de ruptura.
Descienda hasta 162 px para cubrir toda la gama, incluido Apple Watch Series 6 (40mm): un diseño que se ajusta a este ancho se ajusta en todas partes. En el lado de la tableta, también considere los valores en paisaje, donde el ancho y la altura se invierten.
Atención a la altura: los navegadores móviles reducen el área visible con sus barras de interfaz, y estas se retraen al desplazarse. Una altura en 100vh desborda por lo tanto de la primera pantalla; las unidades svh y dvh son preferibles.
Prueba tu sitio en 39 dispositivos Apple, sin comprar ni uno solo
Las tablas dan las medidas. La extensión muestra tu sitio en el viewport exacto del modelo, con su densidad, su User-Agent y el cambio de retrato a paisaje.
- 39 dispositivos Apple listos para usar, desde modelos antiguos hasta lanzamientos del año
- Capturas y videos exportados en el formato del dispositivo
- Funciona en sus entornos locales y sus preproducciones
Gratis · 4,9/5 sobre 5100 opiniones
1.500.000+ usuarios
Preguntas frecuentes
¿Cuál es el viewport CSS más común en Apple ?
375 x 812 px, compartido por 8 de los 49 modelos referenciados, incluyendo Apple iPhone 13 Mini y Apple iPhone SE. Es el ancho a verificar primero en esta gama.
¿Qué ancho mínimo probar para cubrir los dispositivos Apple ?
162 px, el ancho del modelo más estrecho de la lista, Apple Watch Series 6 (40mm). Si su diseño se ajusta a 162 px, se ajusta a los 49 dispositivos Apple referenciados, hasta el más ancho que alcanza 2048 px.
¿Por qué la resolución anunciada por Apple no corresponde al viewport CSS?
Porque estas pantallas muestran varios píxeles físicos por píxel CSS. Apple iPhone 17 tiene una pantalla de 1206 x 2622 píxeles y un viewport CSS de 402 x 874 px, es decir, una densidad de 3. Es el segundo valor que se debe escribir en una media query.
¿Las tabletas Apple tienen el mismo viewport en retrato y en paisaje?
Los valores están invertidos: Apple iPad Mini (6th Gen) muestra 768 x 1024 px en retrato y 1024 x 768 px en paisaje. Las tablas dan los valores en retrato, y el simulador permite cambiar de una orientación a otra.
¿Cómo probar su sitio en un dispositivo Apple sin tener uno?
Con la extensión Mobile FIRST: reproduce el viewport, la densidad de píxel, el User-Agent y los eventos táctiles de 39 de estos modelos, directamente en su navegador, incluso en una dirección en localhost.
Las marcas y modelos mencionados pertenecen a sus respectivos propietarios.