31 iPhone simulables · 320 a 440 px · retrato y paisaje
La extensión reproduce en su navegador el viewport CSS, la densidad de píxel, el User-Agent y los gestos táctiles de 31 iPhone, de 320 a 440 px de ancho. La tabla da las medidas de cada modelo, y cada línea remite a su ficha completa.
1.500.000+ instalaciones · 4,9/5 en el Chrome Web Store
Instalación gratuita en segundos · solo computadora
Los 31 iPhone del simulador se distribuyen en 11 anchuras diferentes, de 320 a 440 px. Validar el que tiene a mano no dice nada de los 10 otros: es de un modelo a otro, y no de una marca a otra, que el diseño se rompe.
Según la generación, cada píxel CSS es renderizado por 2 o 3 píxeles físicos: 11 modelos en 2x, 30 en 3x. Una imagen nítida en los primeros aparece borrosa en los segundos si no sirve una versión de alta resolución.
Cambiado a paisaje, un iPhone reciente alcanza 956 px de ancho y activa los puntos de ruptura que reservaba para las tabletas. Es la orientación menos probada, y aquella donde los encabezados fijos ocupan la mitad de la pantalla.
Sin Mac, sin cuenta, sin descarga de imagen del sistema: el simulador se aplica a la pestaña abierta.
11 anchuras CSS distintas cubren toda la selección: 320, 360, 375, 390, 393, 402, 414, 420, 428, 430 y 440 px. Varios modelos comparten la misma: validar uno de ellos es suficiente para validar los otros, y la tabla permite ver cuáles.
| 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 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Las anchuras más representadas de la gama son 375, 390 y 428 px. Verificarlas primero cubre 14 de los 31 modelos de la tabla: es sobre ellas que deben caer sus primeros puntos de ruptura, antes de añadir más.
Descienda hasta 320 px para cubrir toda la gama, incluido Apple iPhone 5: un diseño que se mantiene a esta anchura se mantiene en todos los iPhone en circulación. Los modelos recientes suben a 440 px, lo que supone una diferencia de 120 px entre los dos extremos.
En los modelos con notch o Dynamic Island, el área útil no comienza en el borde de la pantalla. Declare viewport-fit=cover y luego reserve el margen con las variables env(safe-area-inset-top) y env(safe-area-inset-bottom): sin ellas, una barra fija en la parte inferior de la página pasa por debajo de la barra de inicio del sistema.
Atención a la altura en Safari iOS: las barras de interfaz reducen el área visible y se retraen al desplazarse. Una altura de 100vh desborda la primera pantalla; las unidades svh y dvh dan el valor realmente mostrado.
El simulador de Xcode ejecuta un iOS real y un Safari real: es la única forma de reproducir un error del motor de renderizado WebKit. Requiere un Mac, varios gigabytes de descarga y no se abre en medio de una sesión de integración.
El modo responsive de DevTools redimensiona la ventana del navegador y cambia el User-Agent. Es una herramienta de inspección: sin marco de dispositivo, sin gestos táctiles realistas, una sola pantalla a la vez, y nada que mostrar a un cliente.
Mobile FIRST se sitúa entre los dos. Reproduce el viewport, la densidad, el User-Agent y los eventos táctiles de 31 iPhone en el navegador que ya tiene abierto, en Windows, macOS o Linux, y muestra varios modelos lado a lado. El motor de renderizado sigue siendo el de su navegador: para validar un comportamiento propio de WebKit, un dispositivo real o el simulador de Apple siguen siendo necesarios.
Las tablas dan las medidas. La extensión muestra su sitio en el viewport exacto del modelo, con su densidad, su User-Agent y el cambio de retrato a paisaje.
Gratis · 4,9/5 sobre 5100 opiniones
1.500.000+ usuarios
Depende del modelo y va de 320 a 440 px de ancho en los 31 iPhone del simulador. El valor más común es 390 px, compartido por 6 modelos. Es esta anchura en píxeles CSS, y no la resolución del panel, la que leen sus media queries.
No, y es importante saberlo: reproduce el viewport, la densidad de píxel, el User-Agent y los gestos táctiles del iPhone en el motor de su navegador. Esto cubre el diseño, los puntos de ruptura y el comportamiento táctil. Para un error propio del motor WebKit, se necesita un dispositivo real o el simulador de Xcode.
Sí. La extensión se instala en Chrome, Firefox y Edge, en Windows, macOS y Linux. A diferencia del simulador de Xcode, no requiere hardware de Apple ni descarga de imagen del sistema.
31 modelos preconfigurados, del más reciente al más antiguo, actualizados en cada lanzamiento. Los 10 otros iPhone del catálogo tienen cada uno su ficha técnica en el sitio: reporte el ancho y la densidad en un dispositivo personalizado para encontrarlos en la lista.
El del dispositivo elegido, tal como lo envía realmente. Para Apple iPhone 17 bajo iOS 26.0, es: Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1. Los servidores y los scripts de detección ven por lo tanto un iPhone, y no su navegador de escritorio.
El simulador aplica el margen de seguridad del modelo: un diseño que ignora env(safe-area-inset-bottom) deja ver el problema como en el dispositivo. Declare viewport-fit=cover en la etiqueta viewport para que estas variables tomen un valor.
Sí. La extensión se aplica a la pestaña actual independientemente de la URL: producción, preproducción o servidor local durante el desarrollo. Esto es lo que la distingue de los simuladores en línea, que no ven su máquina.
Cree un dispositivo personalizado con el ancho, la altura y la densidad de la ficha correspondiente, luego guárdelo: se une a la lista y se comporta como los modelos preconfigurados.
iPhone, iPad, Safari y Xcode son marcas de Apple Inc. Mobile FIRST no está afiliado ni aprobado por Apple.
