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.

Tenemos diferentes tipos de hosting, selecciona uno:

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

Otras Formas de Ver Cómo queda tu Web en el Móvil

Ya hemos visto cómo puedes usar Google Chrome para ver cómo queda tu web en un dispositivo móvil, pero no es la única forma de hacerlo.

Existen varias herramientas web que puedes utilizar para ver cómo queda tu web en distintos dispositivos, ya sean móviles, tablets o distintas resoluciones de pantalla de escritorio.

Estas herramientas vienen muy bien si no quieres navegar entre las opciones del navegador, ya que en la mayoría sólo tendrás que poner la URL de la web que quieras revisar.

Browserstack

Browserstack

Browser Stack es una herramienta 100% online con la que puedes revisar cualquier web.

Cuando realizas una consulta, aparece en los distintos dispositivos, literalmente, ya que han añadido una muestra de cada uno de ellos, con sus nots, bordes, etc… para que veas, de verdad, cómo queda la web en los dispositivos.

Entre los dispositivos encontraremos los más utilizados, como el iPhone X, Galaxy Note, Google Pixel y muchos más.

También encontraremos tabletas como el iPad o el Kindle Fire, así como resolución en monitores de escritorio.

Un forma muy «visual» de ver el resultado final, con el único inconveniente de que te pedirán un registro para poder continuar con la visualización.

 

Ui.dev

Ui.dev

Otro sitio web que podemos visitar para comprobar cómo es de responisve nuestra web, es Ui.dev.

Aquí el funcionamiento es más sencillo si cabe. No dispone de una lista de dispositivos con, con su nombre, modelo, marca, etc…, pero si tiene cuatro dispositivos, que son:

Al añadir la URL, veremos cómo queda el sitio en estos 4 dispositivos, incluso podemos hacer scroll independiente en cada uno de ellos. Más sencillo imposible.

 

Website Responsive Rest

Website Responsive Rest

Website Responsive Rest es otra web, muy rápida y efectiva, para comprobar si el diseño de nuestra web es adaptable a todo tipo de resoluciones.

Aquí no tenemos modelos de móvil, pero si tenemos resoluciones de pantalla.

Sólo tenemos que poner la URL en el campo de búsqueda y al instante lo veremos en la pantalla.

Cada cambio de resolución de pantalla es inmediato y nos indica a qué tipo de móviles corresponde esa resolución.

También recrean algunos de los dispositivos que coincide con la resolución elegida, pero no con todos.

 

Responsive Design Checker

Responsive Design Checker

Otra opción que podemos utilizar para ver si nuestro diseños son todo adaptables que pensamos que son es Responsive Design Checker.

Aquí sólo tienes que añadir la URL en la búsqueda y aparecerá de inmediato.

Ala izquierda tenemos los iconos de un ordenador, una tablet y un móvil, si los pulsamos aparecerán distinta resoluciones y los dispositivos que «encajan» en estas resoluciones.

Sólo tenemos que ir pulsando cada una de ellas para ver el resultado.

Si ninguna de las resoluciones nos encaja, podemos modificarla por la que queramos, así ver cómo queda en dispositivos más actuales, ya que los que aparecen en la lista son algo «antiguos».

Eso sí, tenemos que saber cuál es la resolución de pantalla del dispositivo.

 

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.

 


¿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

  • SSD 12´99 / mes
  • SSD 54´99 / mes
  • SSD 259´99 / mes
  • SSD 5012´99 / mes
  • SSD 7514´99 / mes
  • SSD 12´99/mes
  • SSD 54´99/mes
  • SSD 259´99/mes
  • SSD 5012´99/mes
  • SSD 7514´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco dura ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Tras evaluación de nuestro equipo de migraciones y nuevas altas de Hosting
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Todo lo que necesitas para sacar partido a tu Host
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Espacio por cuenta de correoSujeto al espacio en disco del plan de hostingSujeto al espacio en disco del plan de hostingSujeto al espacio en disco del plan de hostingSujeto al espacio en disco del plan de hostingSujeto al espacio en disco del plan de hosting
    • Centro de datos en Madrid (España)
    • Opcion de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Opción de contratación de certificados SSL Wildcard. Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUI
    • Opción de contratación de certificados SSL Extended Validation (EV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUI
    • Opción de contratación de certificados SSL Organization Validation (OV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUI
    • Con nuestra herramienta WebFácil construye tu página web en solo 5 pasos.
    • Con la herramienta de instalación Softaculous tan solo deberás elegir la aplicación deseada y con tan solo un par de clicks y de forma totalmente automatizada tendrás tus herramientas favoritas instaladas en tu Host.
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting y Dominios
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precios para nuevas altas. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.

Hosting WordPress

 

  • Hosting especializado en WordPress con discos SSDWordPress 55´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99 / mes
  • Hosting especializado en WordPress con discos SSDWordPress 55´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 107´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 5011´99/mes
  • Hosting especializado en WordPress con discos SSDWordPress 7513´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precio para nuevas altas. Contratación anual.

 

¿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!