Diseño Web

Ξ 4 comentarios

Cómo emular navegación móvil desde Google Chrome

por Xabadu
Cómo emular navegación móvil desde Google Chrome

Uno de los grandes desafíos que enfrentamos al desarrollar sitios Web, es adaptarnos a la diversidad de usuarios que eventualmente (y si nos va bien) tendremos. Ahora, además de preocuparnos de revisar como nuestro sitio se ve en distintos navegadores, sistemas operativos y resoluciones de pantalla, tenemos que tomar en cuenta los distintos dispositivos desde los cuales pueden entrar (teléfonos móviles, tablets, consolas y televisores por ejemplo) y como es la experiencia, tanto visual como de accesibilidad y usabilidad, en cada uno de ellos. Lamentablemente, por el costo que implica, no siempre podemos contar con dispositivos reales para hacer estas pruebas (a no ser que seas Dexter).

Es por eso que hoy, en CLH, les enseñaremos un pequeño truco para hacer pruebas directamente desde tu Google Chrome, sin extensiones, ni programas extras, solo en unos cuantos pasos.

El detalle, como siempre (o as usual si le haces al persueychon y al éxito), después del salto.

Implementos necesarios:

  • Google Chrome (puedes descargarlo desde este enlace).

¿Cómo lo hago?

 1.- Lo primero que haremos, será abrir Chrome, y probaremos una URL cualquiera (en este caso por ej. probaremos con el sitio de IGN, que su versión móvil se encuentra en un dominio distinto al de su versión normal):

2

2.- Ahora hacemos click derecho sobre cualquier parte del sitio, y seleccionamos la opción “Inspeccionar elemento”:

3

3.- Al seleccionar la opción, se abrirá el panel de desarrollo de Chrome, el cual nos muestra varias opciones y elementos que no detallaremos ahora. El que nos interesa está al extremo derecho y es la opción “Show drawer”, por lo que haremos click ahí:

4

5

4.- Con esto se abrirá un panel inferior, el cual nos presentará nuevas opciones. En este panel, debemos seleccionar la opción “Emulation”.

6

5.- Y esta opción nos presenta un listado de dispositivos móviles que pueden ser emulados a través de Chrome. Desde smartphones conocidos (como iPhones desde el 3gs al 5 o la familia de los Nexus, Galaxy o Xperia para Android) hasta tablets (como iPads o varios modelos de tablets con Android):

7

8

6.- Ahí solo debemos seleccionar el dispositivo de la lista que queremos visualizar, y hacemos click en Emulate. Al hacer click ahí, automáticamente cambiará el tamaño de visualización del sitio:

9

Y ahí podemos ver que cambió al tamaño de pantalla del dispositivo que seleccionamos. Sin embargo, también podemos ver que el contenido del sitio se ve extraño y no es el mismo que veríamos al acceder desde el teléfono. Y esto es porque al hacer click en Emulate, solo ajustamos el tamaño, pero el contenido descargado ya fue emitido como si hubiésemos entrado desde un navegador normal, por lo que para poder ver el contenido correcto, debemos actualizar la página:

10

Al recargar, podemos ver lo siguiente:

  1. Nos redirecciona automáticamente al dominio del sitio móvil (en este caso http://m.ign.com).
  2. Nos muestra el contenido correspondiente al sitio Web móvil.
  3. Al detectar que es un dispositivo con Android, nos indica que hay una app nativa y nos ofrece instalarla.

 

¡Y así de simple!, emulamos contenido en Chrome, tal como si estuviésemos navegando desde un teléfono móvil. Este truco, si bien nunca reemplazará a un dispositivo real, nos permite acercarnos bastante a la experiencia e ir probando algunos ajustes que en otra instancia no podríamos.

Así que a probar 😀

Como siempre, les recordamos que este tutorial ha sido desarrollado, probado y documentado por el equipo de CLH, por lo que cuenta con nuestro Sello de Garantía.

Sello de GarantÍa CLH

Cualquier duda y/o comentario, pueden dejarnos unas líneas a continuación.

Esperamos que este tutorial sea de utilidad para uds.

¡Hasta la próxima!

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

4 Comentarios

  • Muy bueno no sabía que había esta herramienta, felicitaciones por el post. 🙂

  • Llevaba muchiiiiisimas semanas buscando por la red guna opción lara simular de MANERA REAL, lo que se ve desde un smartphone o tablet para poder configurar y que todo funcione correctamente en mi web! GRACIAS!!!!!

    Os dejo mi web para que la podais visitar si quereis ir viendo los progresos!

  • Excelente aporte!!!

  • muchas gracias la verdad me ha servido mucho

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos