Puedes ver la versión móvil de una web en el ordenador de cuatro maneras: estrechar la ventana del navegador, usar el modo dispositivo de Chrome DevTools, instalar una extensión de vista móvil o abrir la página en un emulador de móvil. La primera es rápida pero a menudo engañosa. Las otras tres piden a la web su diseño móvil real, que es lo que normalmente quieres.
Cuál te conviene depende de para qué miras. Quien diseña y revisa espaciados necesita algo distinto de quien hace marketing y quiere ver lo que ven los clientes en un iPhone, o de quien desarrolla y persigue un fallo que solo ocurre en Android.
Por qué una ventana estrecha no es la versión móvil
Al arrastrar el borde de la ventana, el viewport se estrecha, las media queries de CSS se activan y un diseño responsive se recoloca. Esa parte funciona. Lo que no cambia es todo lo demás que la web sabe de tu dispositivo.
Un móvil envía una cadena de user agent móvil y client hints como Sec-CH-UA-Mobile: ?1. Comunica a JavaScript un tamaño de pantalla pequeño, una densidad de píxeles alta y soporte táctil. Algunas webs usan esas señales para servir otra página, un subdominio m. aparte, imágenes más ligeras u otro menú. Una ventana estrecha de escritorio no envía nada de eso, así que puedes acabar mirando una página de escritorio aplastada.
También hay un límite práctico: Chrome de escritorio normalmente no deja estrechar la ventana mucho por debajo de 500 píxeles, y muchos móviles tienen un viewport de 360 a 440 píxeles CSS.
Método 1: el modo dispositivo de Chrome DevTools
Chrome trae un emulador de móvil integrado. Abre DevTools con F12 (o Cmd + Option + I en Mac) y pulsa Cmd + Shift + M en Mac o Ctrl + Shift + M en Windows para activar la barra de dispositivos. Elige un dispositivo en la lista Dimensions y recarga la página.
El modo dispositivo cambia el viewport, la densidad de píxeles y el user agent, y puede pasar a eventos táctiles. También limita la red y la CPU, lo que ayuda a probar la velocidad. Google lo describe como una «aproximación de primer orden» a un móvil, porque la CPU y el navegador de tu ordenador siguen siendo de escritorio.
La pega es el trabajo extra. DevTools ocupa un tercio de la pantalla, los preajustes son genéricos y hay que configurarlo todo de nuevo en cada pestaña. Explicamos el proceso completo en la guía del emulador móvil de Chrome.
Método 2: una extensión de vista móvil
Una extensión de vista móvil hace lo esencial desde un botón de la barra de herramientas, sin abrir DevTools. Mobile View Extension para Chrome, por ejemplo, recarga la pestaña actual dentro de un marco de móvil o tablet con el user agent, las dimensiones de pantalla y la densidad de píxeles del dispositivo. Eliges un preajuste de Apple o Android por su nombre, cambias entre vertical y horizontal y guardas una captura PNG de la vista con marco.
Es la opción más rápida si revisas páginas a menudo, repasas la web de un cliente o quieres ver una página «como en el móvil» mientras sigues navegando. La vista previa sigue activa al navegar y funciona en localhost.
Tiene límites que conviene conocer. La vista previa funciona en un marco dentro de Chrome de escritorio, así que no se generan eventos táctiles y sigues usando el ratón. Las media queries hover y pointer no se emulan del todo. Para gestos táctiles o rendimiento en hardware real, usa un móvil de verdad. Las ventajas e inconvenientes de ambos enfoques se comparan en extensión de simulador móvil o DevTools.
Método 3: un emulador o simulador de móvil
Cuando necesitas el navegador móvil real y no Chrome de escritorio haciéndose pasar por él, usa un emulador:
- Simulator de Xcode (solo macOS): ejecuta el Safari real de iOS. Es lo más parecido a un iPhone sin tener uno. Mira cómo probar una web en iPhone.
- Emulador de Android Studio: ejecuta Android con Chrome en Windows, macOS o Linux. Mira cómo probar una web en Android.
Los dos son gratis, los dos pesan mucho y tardan minutos en arrancar. Son la herramienta adecuada para fallos propios de un motor, como un diseño que solo se rompe en Safari.
Método 4: pedir directamente la web móvil
Algunas webs antiguas aún tienen una versión móvil aparte en una dirección tipo m.example.com. Escribir esa dirección en un navegador de escritorio suele mostrar directamente las páginas móviles. Las webs modernas casi nunca funcionan así, y muchas redirigen al dominio principal a quien entra desde escritorio, así que tómalo como un atajo para webs concretas más que como un método.
Qué método usar
| Objetivo | Mejor método | Por qué |
|---|---|---|
| Ver rápido cómo se ve una página en el móvil | Extensión de vista móvil | Un clic, user agent móvil real, sigue activa mientras navegas |
| Depurar CSS o JavaScript en un diseño móvil | Modo dispositivo de DevTools | Los paneles Elements, Console y Network están junto a la vista previa |
| Revisar un fallo que solo pasa en Safari | Simulator de Xcode o un iPhone real | Solo WebKit muestra los fallos de WebKit |
| Medir la velocidad en móvil | Limitación de DevTools o un test de velocidad web en móvil | El hardware de escritorio esconde los scripts lentos |
| Revisar zonas táctiles y gestos | Un móvil real | Los clics de ratón no reproducen los dedos |
Qué revisar cuando ya ves la versión móvil
Abrir la vista móvil es lo fácil. Lo útil es una lista corta:
- El texto se lee sin hacer zoom, y el texto principal mide al menos 16 px.
- Nada se desplaza de lado. Una barra de scroll horizontal suele indicar un elemento de ancho fijo o una tabla ancha.
- El menú se abre, se cierra y se maneja con el pulgar.
- Los botones y enlaces están lo bastante separados para tocarlos.
- Los formularios muestran el teclado adecuado y no quedan tapados por barras fijas.
- Las imágenes se ven nítidas en pantallas de alta densidad sin pesar demasiado.
Para una lista más completa antes del lanzamiento, usa el checklist de pruebas de web móvil.
Preguntas frecuentes
¿Puedo ver la versión móvil de una web en Chrome sin extensión?
Sí. Abre DevTools y activa la barra de dispositivos con Ctrl + Shift + M (Cmd + Shift + M en Mac). Una extensión te ahorra esos pasos y mantiene el ajuste por pestaña.
¿Alejar el zoom o redimensionar la ventana muestra la web móvil?
Redimensionar muestra cómo se recoloca un diseño responsive a ese ancho. No envía un user agent móvil, así que las webs que detectan el dispositivo seguirán sirviendo su versión de escritorio.
¿La vista móvil en el ordenador es exactamente lo que muestra un móvil?
Se acerca, pero no es idéntica. Las herramientas de escritorio cambian el viewport y las señales que lee la web. No cambian el motor de renderizado, la CPU ni la entrada táctil. Para la comprobación final, abre la página en un móvil real.