Función de modo de dispositivo de Chrome: emule dispositivos móviles rápidamente
- Categoría: Google Chrome
Como webmaster, no solo debe asegurarse de que se muestre el contenido correcto a los usuarios de escritorio, sino también de que los usuarios de dispositivos móviles se atiendan correctamente.
Esto puede ser un gran problema considerando que no es posible probar todos los sistemas operativos, navegadores y resoluciones de pantalla posibles que utilizan estos dispositivos, al menos no sin emulación o alguna ayuda de software.
Una de las cosas de las que debe asegurarse es que el sitio web se muestre bien independientemente del tamaño de la pantalla. Debería mostrarse bien para los visitantes que navegan por la web con el iPhone 5 de Apple, con un dispositivo Google Nexus, un Windows Phone o un Kindle de Amazon.
El modo de dispositivo de Google Chrome, disponible también en Chromium, le proporciona las herramientas para emular rápidamente dispositivos móviles en el navegador.
Una aplicación es asegurarse de que la pantalla se muestre bien en el dispositivo, otra para averiguar qué tan bien se entregan los contenidos al dispositivo.
Nota : Es posible que las versiones de lanzamiento de Chrome carezcan de algunas funciones de emulación y modo de dispositivo. Sin embargo, estas funciones estarán disponibles eventualmente.
Iniciar el modo de dispositivo
Para iniciar el modo de dispositivo, primero abra las Herramientas para desarrolladores. Puede hacer esto con el atajo Ctrl-Shift-i, o haciendo clic en el ícono de Hamburguesa y seleccionando Más herramientas> Herramientas de desarrollo en el menú contextual.
Aquí debe seleccionar el botón de modo de dispositivo que encontrará en la esquina superior izquierda junto al icono del inspector.
Una vez hecho esto, se muestra un nuevo menú en la parte superior y notará que las reglas también se muestran vertical y horizontalmente.
Puede usar el menú del dispositivo en la parte superior para seleccionar un dispositivo en particular que le interese. Chrome modificará automáticamente la página para que se ajuste a la resolución (que puede deshabilitar si lo desea).
Además de las opciones para cambiar rápidamente entre diferentes dispositivos, se admiten un par de docenas de dispositivos, específicos y genéricos, además es posible habilitar la limitación de la red para emular conexiones lentas y modificar el agente de usuario que se cambia automáticamente cuando cambia de dispositivo.
Dependiendo del sitio en cuestión, puede ser necesario volver a cargarlo para obtener resultados adecuados. Este es, por ejemplo, el caso de Ghacks, donde tuve que volver a cargar la página para mostrar la versión móvil del sitio.
Otra opción interesante es la capacidad de intercambiar rápidamente el ancho y la altura de la pantalla para emular también el modo horizontal.
Puede obtener más información sobre otras funciones del modo de dispositivo en el sitio web oficial para desarrolladores de Chrome .
Conclusión
El modo de dispositivo ofrece una forma excelente de probar cómo se muestran los contenidos del sitio web en varios dispositivos móviles emulados. Se puede utilizar para probar rápidamente si la versión móvil de un sitio funciona según lo previsto o si es necesario realizar cambios para mostrar mejor los contenidos a los usuarios móviles.