La forma más precisa de probar una web en iPhone sin tener uno es el simulador de iOS que viene con Xcode en el Mac. Ejecuta el Safari real de iOS, así que muestra los fallos de renderizado de Safari, el teclado en pantalla y la interfaz del navegador. En Windows o Linux no hay simulador oficial de iOS; tus opciones son WebKit con Playwright, un servicio de pago de dispositivos en la nube o una vista móvil en Chrome para revisar el diseño.
Así funciona cada opción y esto es lo que detecta.
Por qué probar en iPhone exige Safari y no Chrome
Todos los navegadores de iPhone, incluidos Chrome y Firefox, han tenido que usar históricamente el motor WebKit de Apple. Ahora Apple permite otros motores en algunas regiones, pero WebKit sigue siendo lo que ve casi todo usuario de iPhone. WebKit tiene su propio comportamiento en cosas como 100vh y la barra de direcciones que se contrae, position: fixed con el teclado en pantalla, los controles de formulario, los selectores de fecha y algunas funciones nuevas de CSS.
Por eso una página puede verse perfecta en la emulación de iPhone de Chrome y aun así romperse en un iPhone de verdad. Chrome puede copiar el tamaño de pantalla y el user agent del iPhone, pero dibuja la página con su propio motor.
Opción 1: Simulator de Xcode en Mac (gratis, lo más parecido a la realidad)
- Instala Xcode desde la Mac App Store. La descarga es grande.
- Abre Xcode, ve a Settings > Components (Platforms en versiones antiguas) e instala un runtime de iOS si no hay ninguno.
- Abre el simulador desde Xcode > Open Developer Tool > Simulator.
- Elige un dispositivo con File > Open Simulator, abre Safari en el móvil simulado y escribe tu URL.
El simulador comparte la red del Mac, así que http://localhost:3000 funciona dentro sin configurar nada más. Puedes girar el dispositivo, cambiar el tamaño del texto en la app Ajustes simulada y probar el modo oscuro.
Inspeccionar la página con el inspector web de Safari
Para depurar lo que ves:
- En el Mac, abre Safari, ve a Ajustes > Avanzado y activa Mostrar funciones para desarrolladores web.
- En el menú Desarrollo de Safari, elige el simulador y después la página abierta.
Tendrás el inspector web completo (elementos, consola, red) para la página que se ejecuta en Safari de iOS. El mismo menú muestra también un iPhone real conectado por cable cuando activas el Inspector web en el teléfono, en Ajustes > Apps > Safari > Avanzado (en versiones antiguas de iOS, Ajustes > Safari > Avanzado).
Opción 2: WebKit con Playwright (Mac, Windows, Linux)
Playwright es una biblioteca de código abierto para automatizar navegadores que incluye una versión de WebKit para los tres sistemas de escritorio. Trae descriptores de dispositivos para modelos de iPhone, que fijan el viewport, la densidad de píxeles, el user agent y el soporte táctil.
No es Safari de iOS. Es el motor WebKit en un sistema de escritorio, sin la interfaz propia del navegador de iOS. Aun así detecta buena parte de las diferencias de renderizado de WebKit, y se puede automatizar, así que puedes hacer capturas de cada página clave a tamaño de iPhone en tu CI. Para quien desarrolla en Windows, es la forma más barata de ver WebKit.
Opción 3: servicios en la nube con dispositivos reales
Servicios como BrowserStack, LambdaTest y Sauce Labs alquilan acceso a iPhone reales en un centro de datos y retransmiten la pantalla a tu navegador. Tienes hardware real, Safari real y muchas versiones de iOS. Son de pago, normalmente con una prueba gratuita limitada, y la pantalla remota tiene algo de retraso.
Úsalos para las comprobaciones finales de los flujos importantes (registro, pago) cuando no tienes ni Mac ni iPhone, o cuando necesitas una versión antigua de iOS.
Opción 4: una vista rápida a tamaño de iPhone en Chrome
Para dudas puramente de diseño (¿cabe el menú a 390 px?, ¿se recorta bien la imagen principal?), una vista a tamaño de iPhone en Chrome basta y lleva segundos:
- el modo dispositivo de Chrome DevTools con un preajuste de iPhone, explicado en la guía del emulador móvil de Chrome
- una extensión de vista móvil como Mobile View Extension, que recarga la pestaña dentro de un marco de iPhone con el user agent y el tamaño de pantalla del iPhone
Tómalo como una primera pasada. Todo lo que se vea raro, y todo lo que tenga que ver con formularios, scroll o elementos fijos, merece una revisión con la opción 1, 2 o 3.
Qué detecta cada opción
| Problema | Vista móvil de Chrome | Playwright WebKit | Simulator de Xcode | Dispositivo real en la nube |
|---|---|---|---|---|
| Diseño al ancho de un iPhone | Sí | Sí | Sí | Sí |
| El servidor envía otra página móvil | Sí (user agent) | Sí | Sí | Sí |
| Diferencias de CSS y JavaScript en WebKit | No | Casi todas | Sí | Sí |
Barra de direcciones y comportamiento de 100vh |
No | No | Sí | Sí |
| Teclado en pantalla que tapa los campos | No | No | Sí | Sí |
| Rendimiento y memoria reales | No | No | No | Sí |
Una rutina práctica de pruebas en iPhone
- Revisa el diseño a 375 px y a 393–402 px en una vista móvil de Chrome.
- Abre las páginas clave en el Simulator de Xcode (o en Playwright WebKit en Windows).
- Rellena todos los campos de los formularios fijándote en el teclado y en los elementos fijos.
- Haz scroll en las páginas largas para ver cómo interactúan las cabeceras fijas con la barra de direcciones.
- Antes del lanzamiento, haz el flujo más importante al menos una vez en un iPhone real o en un dispositivo en la nube.
Los tamaños de viewport de los iPhone actuales están en la tabla de tamaños de pantalla de iPhone. Para el resto de navegadores de tus visitantes, consulta el checklist de pruebas cross browser.
Preguntas frecuentes
¿Puedo probar una web en Safari de iPhone desde Windows?
No con un simulador oficial: el Simulator de Apple solo funciona en macOS. En Windows, usa WebKit con Playwright para comprobaciones a nivel de motor o un servicio en la nube con dispositivos reales para el Safari de verdad.
¿El Simulator de Xcode es lo mismo que un iPhone real?
Ejecuta iOS y Safari reales, así que el renderizado coincide mucho. Pero funciona con el procesador de tu Mac, de modo que el rendimiento, los límites de memoria y algunas funciones de hardware difieren de un móvil real.
¿Por qué mi web funciona en la emulación de iPhone de Chrome pero falla en un iPhone?
La emulación de Chrome copia el tamaño y el user agent del iPhone, pero renderiza con el motor de Chrome. Los fallos propios del motor WebKit de Safari solo aparecen en Safari.