Portada Diseño Web Cómo usar Google Chrome para ver cómo queda una web en un dispositivo móvil
Si estás desarrollando una web y, te gustaría ver cómo queda en un dispositivo móvil, y responsive, 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.
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”.
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.
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.
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.
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.
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.
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.
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.
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.
Una 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.
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 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.
Otra opción que podemos utilizar para ver si nuestros 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 distintas 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.
CrossBrowserTesting es una plataforma integral que ofrece una solución de pruebas en distintos navegadores y dispositivos.
Esta herramienta permite a los usuarios comprobar la compatibilidad de su sitio web en más de 1500 navegadores y dispositivos móviles reales.
Lo destacable de CrossBrowserTesting es su capacidad para realizar pruebas de responsividad, pruebas automatizadas de Selenium y capturas de pantalla en múltiples entornos, todo en una plataforma basada en la nube.
Es ideal para asegurarse de que tu sitio web ofrece una experiencia de usuario coherente y de alta calidad en cualquier plataforma o dispositivo.
LambdaTest es una plataforma de pruebas de compatibilidad en la nube que facilita las pruebas de sitios web y aplicaciones web en diferentes navegadores y sistemas operativos.
Con LambdaTest, puedes realizar pruebas de responsividad en tiempo real para asegurarte de que tu sitio web se ve y funciona perfectamente en una amplia gama de dispositivos móviles y de escritorio.
Ofrece características como pruebas de captura de pantalla automatizadas, pruebas de navegador cruzado y soporte para pruebas de Selenium.
Esta herramienta es especialmente útil para equipos de desarrollo y QA que buscan agilizar su proceso de pruebas y garantizar la compatibilidad universal.
Screenfly por QuirkTools es una herramienta gratuita y fácil de usar para probar tu sitio web en diferentes tamaños de pantalla y dispositivos.
Simplemente ingresa la URL de tu sitio y Screenfly te mostrará cómo se ve en varios dispositivos, incluyendo tablets, teléfonos y monitores de diferentes resoluciones.
Esta herramienta es excelente para obtener una vista rápida de la responsividad de tu sitio web sin necesidad de configuraciones complicadas o instalaciones de software.
Su interfaz intuitiva hace que sea fácil de usar para principiantes y profesionales por igual.
En el mundo actual, no podemos obviar la importancia de un diseño web responsive. Asegura que los sitios web se visualicen correctamente en todo tipo de dispositivos, facilitando una navegación fluida y accesible para todos los usuarios.
Google Chrome es una herramienta bastante útil, ofreciendo a los desarrolladores una serie de funcionalidades integradas que facilitan la visualización y prueba de sitios web en diferentes dispositivos y resoluciones.
Esto no solo facilita la tarea de ajustar y optimizar el diseño de una página web, sino que también contribuye a una experiencia de usuario más inclusiva y satisfactoria.
Pero no todo se limita a las herramientas que ofrece Google Chrome. Hay una variedad de plataformas online que también pueden ayudarte a verificar cómo se ve tu diseño en distintos tipos de pantalla, algo muy útil para los desarrolladores web.
Recuerda que necesitas un hosting web para alojar tus proyectos online, y en eso Hostinet puede ayudarte, ya que tenemos más de 20 años de experiencia ofreciendo servicio de hosting y dominios.
En Hostinet te lo ponemos muy fácil y, por muy poco al mes, puedes contratar un alojamiento web ultra-rápido con discos NVMe para garantizar el éxito de tu proyecto web en Internet.
¿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!