¿Qué es el modo dispositivo del navegador?

¿Qué es el modo dispositivo del navegador?

El modo dispositivo del navegador es una función de las herramientas para desarrolladores, como Chrome DevTools, que hace que una ventana de escritorio se comporte como un móvil o una tableta. Ajusta el tamaño del viewport y la densidad de píxeles, puede lanzar eventos táctiles en lugar de clics y puede limitar la red y la CPU. Chrome lo describe como una aproximación de primer orden a un dispositivo real, no como un sustituto.

Cómo funciona

En Chrome, abre DevTools y pulsa el botón para alternar la barra de dispositivos (Toggle device toolbar). Hay dos modos (consulta la documentación del modo dispositivo de Chrome):

• Viewport adaptable: arrastra los tiradores o escribe un ancho y un alto para ver dónde se rompe tu diseño. Una barra de anchos ofrece valores de 320 px a 2560 px, y Show media queries dibuja tus puntos de corte CSS sobre el viewport para que puedas pasar de uno a otro con un clic.
• Dispositivo concreto: elige un móvil o una tableta en la lista Dimensions para usar el tamaño de su pantalla, gíralo a horizontal o añade un dispositivo personalizado.

La barra también controla la densidad de píxeles (DPR) y el tipo de dispositivo: Mobile lanza eventos táctiles y Mobile (no touch) lanza eventos de clic. La lista de limitación tiene dos ajustes: Mid-tier mobile simula 3G rápido con una CPU cuatro veces más lenta, y Low-end mobile simula 3G lento con una CPU seis veces más lenta. La ubicación y la orientación se configuran en el panel Sensors.

Ejemplo: un menú que se rompe en el móvil

Tu navegación se ve bien a 1440 px. En el modo dispositivo eliges el ancho de un móvil y el menú se desborda porque una regla de ancho fijo nunca se adaptó. La barra de media queries muestra que no hay ningún punto de corte por debajo de 768 px, así que añades uno. Después cambias la limitación a Mid-tier mobile, recargas y ves que la imagen principal tarda varios segundos en aparecer. Es un problema de Largest Contentful Paint que nunca notarías con el wifi de la oficina.

Lo que el modo dispositivo no puede decirte

Chrome lo dice claramente: con el modo dispositivo no ejecutas realmente tu código en un dispositivo móvil. Las CPU móviles se construyen de forma distinta a las de portátiles y sobremesa, así que la limitación ralentiza tu ordenador pero no lo convierte en un móvil. En caso de duda, Chrome recomienda ejecutar la página en un dispositivo real con depuración remota.

Errores habituales

• Tratar la emulación como una prueba en dispositivo real. Los navegadores, el hardware y las redes reales se comportan de otra manera. Usa el modo dispositivo para encontrar rápido errores de diseño y de viewport, y confirma en al menos un móvil real.
• Probar un solo tamaño de móvil. Revisa los viewports de tu propia analítica y arrastra los tiradores para encontrar puntos de corte que no habías previsto.
• Juzgar la velocidad con una sola medición limitada. Una ejecución en un portátil ocupado es ruidosa. Repítela o mide con una herramienta que se ejecute de forma programada.
• Olvidar la densidad de píxeles. Una imagen borrosa en una pantalla de alta densidad solo se ve cuando la DPR coincide con la del dispositivo real.
• Diseñar primero para escritorio. Si miras el móvil al final, corregir sale caro. Consulta el diseño mobile-first.

Modo dispositivo, pruebas y monitorización

El modo dispositivo es una comprobación manual y puntual. Para hacerla repetible, ejecuta las mismas páginas de forma programada: la monitorización de velocidad de LoadFocus lanza auditorías Lighthouse en escritorio y móvil desde 25 regiones en la nube y te avisa cuando cambian las métricas. Para las cifras de tus visitantes reales, el comprobador gratuito de Core Web Vitals muestra datos de campo del Chrome UX Report en móvil y escritorio, y PageSpeed Insights es una herramienta relacionada de laboratorio y campo. Nuestros artículos sobre probar sitios en emuladores de móvil y tableta y programar la emulación móvil profundizan en las pruebas, y la entrada sobre Core Web Vitals explica las métricas.

Preguntas frecuentes: modo dispositivo del navegador

¿Cómo abro el modo dispositivo en Chrome?

Abre Chrome DevTools y pulsa el botón para alternar la barra de dispositivos, en la parte superior de la ventana de DevTools. Elige Responsive o un dispositivo concreto en la barra.

¿Es lo mismo que probar en un móvil real?

No. Aproxima el tamaño de pantalla, la densidad de píxeles, la entrada táctil y las condiciones de red, pero tu código sigue ejecutándose en tu propio ordenador. Las CPU móviles difieren de las de escritorio, así que el rendimiento puede variar mucho.

¿Qué hace la limitación Mid-tier mobile?

Simula una conexión 3G rápida y ralentiza la CPU cuatro veces. Low-end mobile simula 3G lento y una CPU seis veces más lenta.

¿Puedo probar eventos táctiles en el modo dispositivo?

En parte. Con el tipo de dispositivo en Mobile, el ratón genera eventos táctiles, lo que ayuda a revisar los manejadores de toque. No reproduce todos los gestos ni la sensación de una pantalla real.

¿El modo dispositivo cambia lo que ve Google?

No. El modo dispositivo solo cambia cómo tu propio navegador muestra y carga la página. No modifica tu sitio, tu posicionamiento ni los datos de los informes de campo.