Cómo Ver la Versión Móvil de un Sitio Web en Chrome

Probar cómo se ve una página en un teléfono no debería exigir tener diez dispositivos. Esta guía explica cómo ver la versión móvil de las páginas de un sitio web directamente en tu navegador — usando la vista móvil que Chrome ya incluye y una extensión gratuita que se parece mucho más a un teléfono real.

Por qué revisar la vista móvil

Más de la mitad del tráfico web es móvil, pero los diseños que se ven perfectos en un portátil a menudo se rompen en pantallas más pequeñas: el texto se desborda, los botones se superponen, las imágenes se estiran. Saber cómo ver la versión móvil de un sitio antes que tus visitantes evita malas primeras impresiones y pérdida de conversiones. También ayuda al SEO, ya que los buscadores posicionan las páginas según su rendimiento en móvil.

Método 1: modo dispositivo de Chrome DevTools

La forma más rápida de obtener la vista móvil en Chrome es el modo dispositivo de DevTools. Para abrirlo:

1. Abre el sitio web en Chrome.
2. Haz clic derecho en la página y elige Inspeccionar (o pulsa F12).
3. Haz clic en el icono de la barra de dispositivos, o pulsa Ctrl+Shift+M.
4. Elige un tamaño de pantalla en el menú desplegable de la parte superior.
5. Actualiza la página para que se recargue con el user-agent móvil.

Es rápido y gratuito, pero tiene limitaciones reales:

• Muestra solo el viewport, sin marco de dispositivo, barra de estado ni interfaz realista del navegador.
• No replica del todo Safari de iOS ni una versión concreta de Android.
• Comparar varios dispositivos en paralelo resulta incómodo.
• La interfaz está pensada para desarrolladores, no para diseñadores ni equipos de QA.

Método 2: Phone Simulator para una vista realista del dispositivo

Para una vista previa que realmente parezca un teléfono, extensiones como Phone Simulator funcionan mejor. Renderiza la pestaña actual dentro de un marco de dispositivo real, con el viewport, el user-agent y la apariencia del sistema correctos.

Con ella puedes:

• Elegir entre más de 40 dispositivos: iPhone, Samsung Galaxy, Pixel, iPad, portátiles y más.
• Alternar entre vertical y horizontal, además del tema claro y oscuro.
• Ver dos dispositivos a la vez (hasta 8 en PRO) con desplazamiento sincronizado.
• Hacer capturas de pantalla y grabar la pantalla para compartir con tu equipo.
• Crear un dispositivo personalizado con cualquier tamaño, sistema, color y user-agent.

Para empezar:

1. Instala Phone Simulator desde la Chrome Web Store.
2. Abre el sitio que quieras revisar y haz clic en la extensión.
3. Selecciona un dispositivo: la página se carga al instante dentro de un marco realista.
4. Cambia de dispositivo o de orientación para ver todos los diseños.

Todo esto funciona en el plan gratuito, así que puedes probar tu sitio en móvil sin pagar nada.

Cuándo ayuda de verdad la vista realista

Un viewport simple sirve para una comprobación rápida del ancho, pero algunas tareas requieren el panorama completo:

• Mostrar a un cliente una vista móvil del sitio que reconozca al instante como un teléfono.
• Comprobar cómo queda una cabecera fija bajo un notch o la barra de estado.
• Revisar el modo oscuro en un dispositivo concreto.
• Capturar pantallas limpias para una presentación, una ficha de tienda o documentación.

Qué método usar

Si solo necesitas una comprobación rápida de píxeles mientras programas, la vista móvil de Chrome DevTools es suficiente. Si quieres ver el sitio como móvil tal como lo ven los usuarios reales, comparar dispositivos o capturar pantallas, Phone Simulator es la mejor opción. Dominar ambas formas te garantiza tener siempre la herramienta adecuada para cada tarea.