Cómo usar Google Chrome para ver cómo queda una web en un dispositivo móvil

Categorias: Diseño Web

Google Chrome Logo

La importancia del diseño responsive

Si estás desarrollando una web y, te gustaría ver cómo queda en un dispositivo móvil, en este artículo te indicamos los pasos a seguir con Google Chrome.

Indicar que es súper importante que la web sea responsive, es decir, este adapta para poder visualizarse en toda clase de dispositivos correctamente (ampliar información), sino la herramienta para desarrolladores que ofrece Google Chrome para ello no sirve de mucho.

Google Chrome: Cómo ver cómo queda una web en un dispositivo móvil

Para ello, hay que tener instalado el navegador de Google en nuestro ordenador. El navegador es completamente gratuito y se puede descargar de aquí -> https://www.google.es/chrome/browser/desktop/

Una vez descargado e instalado, lo ejecutamos y, en la parte superior derecha, hay que hacer click sobre los 3 puntos para que se desplegué un nuevo menú en el que seleccionar “Más herramientas” -> “Herramientas para desarrolladores”.

Google Chrome -> Más Herramientas Desarrolladores

También podemos acceder a donde indicamos si estando en el propio navegador Google Chrome pulsamos las teclas Ctrl+Shift(Mayús)+I en Windows / Cmd+Opt+I en Mac.

Google Chrome -> Herramientas Desarrolladores Teclas


Entonces, veremos que se abre un nuevo apartado en la derecha. Hay que pinchar sobre el icono de dispositivos o teclear Ctrl+Shift(Mayús)+M en Windows / Cmd+Opt+M en Mac.

Google Chrome -> Device Toolbar

Al hacerlo, podremos contemplar cómo en la parte superior izquierda se abre un nuevo menú con la opción Responsive marcada por defecto, y al lado la resolución actual que estemos utilizando.

El siguiente paso sería hacer click sobre la palabra Responsive y seleccionar al dispositivo bajo el cual queremos comprobar cómo se vería nuestra web. Por defecto, Google Chrome ya viene configurado con algunos de ellos: iPhones, iPads, Kindles, tabletas Nexus, teléfonos Samsung Galaxy o Sony, etc.

Google Chrome -> Device Toolbar Respensive

Puede darse el caso de que Google Chrome por defecto no incluya nuestro dispositivo, pero por suerte incluye una opción mediante “Edit…” para poner nosotros la configuración que deseemos. Así como marcar otros dispositivos que también vienen configurados por defecto, pero que están desmarcados.

Google Chrome -> Device Toolbar Respensive Edit

En caso de querer configurar un dispositivo que no esté en el listado habría que darle a la pestaña de “Add custom devide…” en la parte superior derecha y rellenar los campos: nombre del nuevo dispositivo, resolución y si es táctil o no.

Google Chrome -> Device Toolbar Respensive Emulated Devices

Rellenado todo, bastaría con darle a “Add” para añadir este nuevo dispositivo al listado de dispositivos para emular cómo se vería nuestra web con la configuración indicada.

Google Chrome -> Device Toolbar Respensive Emulated Devices 2

Y eso es todo!!! Esperamos que os haya servido de utilidad este artículo sobre cómo usar Google Chrome para ver cómo queda una web en un dispositivo móvil.


[ninja-popup ID=13602] >>> SUSCRÍBETE AQUÍ A NUESTRAS NOVEDADES POR E-MAIL <<<[/ninja-popup]
¡Te haremos llegar solo lo más interesante!


¿Necesitas un alojamiento web de calidad y ultra-rápido?

En Hostinet te lo ponemos muy fácil y, por muy poco al mes, puedes contratar un alojamiento web ultra-rápido con discos SSD para garantizar el éxito de tu proyecto web en Internet.

Hosting SSD

Hostinet SSD Básico –> Características y Precios

Hosting SSD Cloud

Hostinet SSDCloud –> Características y Precios

¿Tienes dudas?
Estamos a tu completa disposición en nuestro número de teléfono fijo (sin 902) –> 946 545 762
Atendemos en español (de España).

¡Esperamos tu llamada!


Contactar