Tutorial: Verificar cómo se verá tu web en móviles sólo usando Chrome

Hola chicos/as.

Seguro que cuando queréis ver cómo queda un sitio web que estáis testeando tenéis que recurrir a páginas web concretas, addons o similares ¿cierto?

¿Y si te digo que no necesitas más que Chrome o un navegador compatible?

¿No me crees?

Ahí van los pasos ¡verás qué sencillo!

>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 1

Abre el navegador CHROME



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 2

Ingresa al sitio web que quieres verificar cómo se mostrará en dispositivos móviles.

Usaremos una página popular para este ejemplo, ingresaremos a la sección de imágenes del portal YANDEX

Yandex.Images: search for images on the internet, search by image



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 3

Activamos el submenú, desde el menú hamburguesa, denominado

HERRAMIENTAS PARA DESARROLLADORES



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 4

Hacemos clic en el botón con forma de dispositivo móvil



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 5

Ahora deberías poder ver e interactuar con el sitio web como si fuera un dispositivo móvil



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

PASO 6

Desde la parte superior puedes cambiar el tamaño de previsualización que podría tener el dispositivo móvil, el nivel de ZOOM ¡e incluso puedes escoger entre varios dispositivos SIMULADOS!



>====> >====> >====> >====> >====> >====> >====> >====> >====> >====> >====>

Espero que te haya gustado.

Hola [MENTION=1576]ramonjosegn[/MENTION],

:encouragement: Excelente explicación amigo, quedo todo muy claro, ya te dejo mi like de Facebook y Me agrada del foro!

Solo un detalle importante, que espero que tengan en cuenta para sus proyectos:
Estas "developer tools" que se encuentran en todos navegadores y accedes desde F12...
Sirve para la etapa de desarrollo; para visualizar rápidamente como va quedando el trabajo...
Pero sí o sí... para proyectos importantes, se debe probar la web, en dispositivos reales...
Porque casi siempre, saltan detalles importantes que no se ven en estas pruebas de escritorio.

Saludos,
:encouragement: Hugo

muy bueno, pero... qué es el menú hamburguesa? 😱

Muy bueno y detallado el tutorial, para aquellos que quieren el resumen:

1.- Entran a la web desde chrome en tu PC
2.- Presiona F12
3.- Da click en el segundo icono superior izquierda.



4.- Eliges las opciones del menu superior. (Modelo, Zoom, etc).

Wow gracias es muy interesante los temas que compartes.

Es mas usado para Desarrolladores... Se agradece que lo hayas compartido

leo01 dijo:

muy bueno, pero... qué es el menú hamburguesa? 😱

Hacer clic para expandir...

Los menús que no muestran textos, que muestran varias rayitas, vamos los habituales en las aplicaciones móviles, se llaman así en inglés, aún no he visto una traducción acorde al español universal...

Me gustó! Muchas gracias. Muy útil en fases beta.

¿Sabes si sirve para cambiar de user agent? O sea, por ej. Para usar instagram desde el PC.

csnotcs dijo:

¿Sabes si sirve para cambiar de user agent? O sea, por ej. Para usar instagram desde el PC.

Hacer clic para expandir...

Lo probé hace unos días y no me funcionó.

Me temo que tocaría usar alguna extensión que permita cambios del agent.

Muy bueno, yo lo utilizo mas que nada en instagram. ¿Por qué? porque así podemos subir fotos directamente desde el PC.

- - - Actualizado - - -

csnotcs dijo:

Me gustó! Muchas gracias. Muy útil en fases beta.

¿Sabes si sirve para cambiar de user agent? O sea, por ej. Para usar instagram desde el PC.

Hacer clic para expandir...

Sí, si es posible. hay que hacer otro "truco" simplemente cuando instagram te quede en versión móvil. tienes que actualizar el navegador. desde el "cargar pagina" el circulito que esta al lado de la URL.

lRemixHD dijo:

Muy bueno, yo lo utilizo mas que nada en instagram. ¿Por qué? porque así podemos subir fotos directamente desde el PC.

- - - Actualizado - - -



Sí, si es posible. hay que hacer otro "truco" simplemente cuando instagram te quede en versión móvil. tienes que actualizar el navegador. desde el "cargar pagina" el circulito que esta al lado de la URL.

Hacer clic para expandir...

¡Es cierto! Me salvaste la vida.

lRemixHD dijo:

Sí, si es posible. hay que hacer otro "truco" simplemente cuando instagram te quede en versión móvil. tienes que actualizar el navegador. desde el "cargar pagina" el circulito que esta al lado de la URL.

Hacer clic para expandir...

NO sé qué versión del navegador estés usando... a mí con Yandex no me funcionó (quizás el agente sea diferente y lo detecta de otra forma).

ramonjosegn dijo:

NO sé qué versión del navegador estés usando... a mí con Yandex no me funcionó (quizás el agente sea diferente y lo detecta de otra forma).

Hacer clic para expandir...

Quizá sea algo de chrome y no de chromium.

Cuando tengas el modo de movil, anda a la flecha para recargar, dale CLIC SECUNDARIO y selecciona "vaciar cache y cargar de manera forzada". Así te debería funcionar.

Pero no se si está en chromium. Si yandex tiene de motor a chrome, que en realidad usan chromium, quizá haya anulado esta función, o chromium no la incluye.

csnotcs dijo:

Pero no se si está en chromium. Si yandex tiene de motor a chrome, que en realidad usan chromium, quizá haya anulado esta función, o chromium no la incluye.

Hacer clic para expandir...

Yandex incluye 2 motores, Opera y Chrome... por eso funciona algo diferente al resto de navegadores.

Gracias por el consejo. De últimas lo haré con otro navegador más cercano a Chrome (en caso de que me decida a usar Instagram).