Para probar una web en Android desde el ordenador, empieza con una vista a tamaño de Android en Chrome de escritorio y luego confirma en el emulador de Android Studio o en un móvil real conectado con la depuración USB. Chrome de escritorio se parece mucho más a Android que a iPhone, porque Chrome para Android usa el mismo motor Blink. El emulador y el móvil real añaden lo que Chrome de escritorio no puede: la interfaz real del navegador, el teclado y el hardware móvil.
Por qué Android es más fácil de imitar que iPhone
En iPhone, el motor del navegador es casi siempre WebKit, que Chrome de escritorio no usa. En Android, el navegador por defecto de la mayoría es Chrome, construido sobre el mismo motor que Chrome de escritorio. Así que, cuando emulas un móvil Android en Chrome de escritorio, el comportamiento de CSS y JavaScript suele ser el mismo, y las diferencias principales están en el tamaño de pantalla, la entrada, el rendimiento y la interfaz del navegador.
La pega es la variedad. Los móviles Android tienen muchos anchos (normalmente de 360 a 412 píxeles CSS en vertical), densidades de píxeles y navegadores. Samsung Internet, que viene preinstalado en los Samsung, tiene su propio calendario de versiones y sus propios ajustes, como un modo oscuro forzado, que pueden cambiar cómo se ve una web.
Paso 1: una vista a tamaño de Android en Chrome
Para revisar el diseño, usa cualquiera de estas dos herramientas:
- Modo dispositivo de DevTools. Abre DevTools, pulsa
Ctrl + Shift + M(Cmd + Shift + Men Mac), elige un preajuste Pixel o Galaxy y recarga. El modo dispositivo emula eventos táctiles y permite limitar la CPU y la red. Todos los pasos: guía del emulador móvil de Chrome. - Una extensión de vista móvil. Mobile View Extension tiene preajustes de Android y recarga la pestaña actual con el user agent, el tamaño de pantalla y la densidad de píxeles correspondientes, sin abrir DevTools. Va bien para recorrer muchas páginas rápido.
Prueba al menos 360 px y 412 px de ancho, además del horizontal.
Paso 2: el emulador de Android Studio
Android Studio es el entorno de desarrollo gratuito de Google para Android, disponible para Windows, macOS y Linux. Incluye un emulador que ejecuta una imagen completa del sistema Android.
- Instala Android Studio y abre Device Manager.
- Crea un dispositivo virtual. Elige un perfil de móvil y una imagen del sistema que incluya Google Play, para que Chrome venga preinstalado.
- Arranca el dispositivo, abre Chrome y escribe tu URL.
Para llegar desde el emulador a un servidor de desarrollo de tu ordenador, usa la dirección especial 10.0.2.2 en lugar de localhost. Por ejemplo, http://10.0.2.2:5173 llega a un servidor en el puerto 5173 de tu máquina. El emulador necesita tener activada la virtualización por hardware en la BIOS o en los ajustes del sistema para ir a una velocidad aceptable.
Paso 3: un móvil Android real con depuración remota
Un móvil real muestra el rendimiento y el comportamiento táctil verdaderos, y Chrome te deja inspeccionarlo desde el ordenador:
- En el móvil, abre Ajustes > Información del teléfono y toca siete veces Número de compilación para activar las opciones de desarrollador.
- En Opciones de desarrollador, activa la Depuración por USB.
- Conecta el móvil por USB y acepta el aviso de depuración en el móvil.
- En el ordenador, abre Chrome y ve a
chrome://inspect/#devices. - Abre tu web en Chrome en el móvil y haz clic en inspect junto a ella en el ordenador.
Tendrás DevTools completo para la página que se ejecuta en el móvil, con una retransmisión de la pantalla en directo. La misma página ofrece Port forwarding, que asocia un puerto del móvil a tu ordenador para que localhost:3000 en el móvil abra tu servidor local. Más en cómo probar localhost en el móvil.
¿Y un emulador Android online, en el navegador?
Quien busca «emulador android online» suele querer una de dos cosas. Unos quieren una web que ejecute Android en una pestaña del navegador. Esos servicios existen: retransmiten un emulador remoto o un dispositivo real y suelen ser de pago o con tiempo limitado. Otros quieren que el propio Chrome se comporte como un móvil Android, que es justo lo que hacen el modo dispositivo o una extensión de vista móvil.
Para probar webs, lo segundo casi siempre basta para el diseño, y el emulador de Android Studio o un móvil real cubren el resto. Los servicios remotos son útiles cuando no puedes instalar nada en local.
Qué revisar específicamente en Android
- Anchos de 360 y 412 px, los tamaños más comunes en móviles de gama media y alta.
- El teclado en pantalla. Al abrirse, el viewport visible se reduce. Los pies fijos y los botones de chat pueden tapar los campos de texto.
- El botón y el gesto atrás del sistema. Las aplicaciones de una sola página deben gestionar el historial para que «atrás» haga lo que el usuario espera.
- El modo oscuro. Samsung Internet y los ajustes experimentales de Chrome pueden oscurecer las páginas que no declaran un esquema de color.
- El escalado de fuente. En Android se suele aumentar el tamaño de letra del sistema. Comprueba que el texto crece sin romper el diseño.
- El rendimiento en un dispositivo de gama media. Usa la limitación de CPU de DevTools o un móvil real de gama media; los de gama alta esconden el JavaScript lento.
Para la lista completa antes del lanzamiento, consulta el checklist de pruebas de web móvil.
Preguntas frecuentes
¿Es precisa la emulación de Android en Chrome?
Para el diseño y la mayor parte del CSS y JavaScript, sí, porque Chrome para Android usa el mismo motor. Es menos precisa en rendimiento, gestos táctiles e interfaz del navegador, así que confirma los flujos importantes en un móvil real.
¿Cómo abro localhost en el emulador de Android?
Usa 10.0.2.2 en lugar de localhost, con el mismo puerto, por ejemplo http://10.0.2.2:3000.
¿Necesito Android Studio solo para probar una web?
No. La mayoría de las comprobaciones de diseño funcionan en Chrome de escritorio. Merece la pena instalar Android Studio cuando necesitas la interfaz real del navegador de Android, el comportamiento del teclado o una versión concreta de Android.