{"id":18993,"date":"2016-10-05T13:36:57","date_gmt":"2016-10-05T11:36:57","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=18993"},"modified":"2024-01-23T11:43:19","modified_gmt":"2024-01-23T09:43:19","slug":"google-chrome-como-queda-web-dispositivo-movil","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/diseno-web\/google-chrome-como-queda-web-dispositivo-movil\/","title":{"rendered":"C\u00f3mo usar Google Chrome para ver c\u00f3mo queda una web en un dispositivo m\u00f3vil"},"content":{"rendered":"

<\/div>

$\"C\u00f3mo$ <\/p>\n

La importancia del dise\u00f1o responsive<\/strong><\/h3>\n
Si est\u00e1s desarrollando una web<\/strong> y, te gustar\u00eda ver c\u00f3mo queda en un dispositivo m\u00f3vil<\/strong><\/u>, y responsive, en este art\u00edculo te indicamos los pasos a seguir con Google Chrome<\/strong>.<\/p>\n
Indicar que es s\u00faper importante que la web sea responsive<\/strong><\/u>, es decir, este adapta para poder visualizarse en toda clase de dispositivos correctamente (ampliar informaci\u00f3n<\/a>), sino la herramienta para desarrolladores que ofrece Google Chrome para ello no sirve de mucho.<\/p>\n
$\"Hosting$ <\/a><\/p>\n
Google Chrome: C\u00f3mo ver c\u00f3mo queda una web en un dispositivo m\u00f3vil<\/strong><\/h2>\nPara ello, hay que tener instalado el navegador de Google<\/strong> en nuestro ordenador. El navegador es completamente gratuito y se puede descargar de aqu\u00ed -> https:\/\/www.google.es\/chrome\/browser\/desktop\/<\/a><\/p>\n
Una vez descargado e instalado, lo ejecutamos y, en la parte superior derecha, hay que hacer click sobre los 3 puntos<\/strong> para que se desplegu\u00e9 un nuevo men\u00fa en el que seleccionar \u201cM\u00e1s herramientas\u201d -> \u201cHerramientas para desarrolladores\u201d.<\/strong><\/p>\n
$\"Google$ <\/p>\n
Tambi\u00e9n podemos acceder a donde indicamos si estando en el propio navegador Google Chrome pulsamos las teclas Ctrl+Shift(May\u00fas)+I en Windows \/ Cmd+Opt+I en Mac<\/strong>.<\/p>\n
$\"Google$ <\/p>\n
Entonces, veremos que se abre un nuevo apartado en la derecha. Hay que pinchar sobre el icono de dispositivos<\/strong> o teclear Ctrl+Shift(May\u00fas)+M en Windows \/ Cmd+Opt+M en Mac<\/strong>.<\/p>\n
$\"Google$ <\/p>\n
Al hacerlo, podremos contemplar c\u00f3mo en la parte superior izquierda se abre un nuevo men\u00fa con la opci\u00f3n Responsive<\/strong> marcada por defecto, y al lado la resoluci\u00f3n actual que estemos utilizando.<\/p>\n
El siguiente paso ser\u00eda hacer click sobre la palabra Responsive y seleccionar al dispositivo bajo el cual queremos comprobar c\u00f3mo se ver\u00eda nuestra web<\/strong>. Por defecto, Google Chrome ya viene configurado con algunos de ellos: iPhones, iPads, Kindles, tabletas Nexus, tel\u00e9fonos Samsung Galaxy o Sony, etc.<\/strong><\/p>\n
$\"Google$ <\/p>\n
Puede darse el caso de que Google Chrome por defecto no incluya nuestro dispositivo, pero por suerte incluye una opci\u00f3n mediante \u201cEdit\u2026\u201d<\/strong> para poner nosotros la configuraci\u00f3n que deseemos. As\u00ed como marcar otros dispositivos que tambi\u00e9n vienen configurados por defecto, pero que est\u00e1n desmarcados.<\/p>\n
$\"Google$ <\/p>\n
En caso de querer configurar un dispositivo que no est\u00e9 en el listado habr\u00eda que darle a la pesta\u00f1a de \u201cAdd custom devide\u2026\u201d<\/strong> en la parte superior derecha y rellenar los campos: nombre del nuevo dispositivo, resoluci\u00f3n y si es t\u00e1ctil o no<\/strong>.<\/p>\n
$\"Google$ <\/p>\n
Rellenado todo, bastar\u00eda con darle a \u201cAdd\u201d<\/strong> para a\u00f1adir este nuevo dispositivo al listado de dispositivos para emular c\u00f3mo se ver\u00eda nuestra web<\/strong> con la configuraci\u00f3n indicada.<\/p>\n
$\"Google$ <\/p>\n
<\/h2>\n
Otras Formas de Ver C\u00f3mo queda tu Web en el M\u00f3vil<\/h2>\n
Ya hemos visto c\u00f3mo puedes usar Google Chrome para ver c\u00f3mo queda tu web en un dispositivo m\u00f3vil, pero no es la \u00fanica forma de hacerlo.<\/p>\n
Existen varias herramientas web<\/strong> que puedes utilizar para ver c\u00f3mo queda tu web en distintos dispositivos, ya sean m\u00f3viles, tablets<\/strong> o distintas resoluciones de pantalla de escritorio.<\/p>\n
Estas herramientas vienen muy bien si no quieres navegar entre las opciones del navegador, ya que en la mayor\u00eda s\u00f3lo tendr\u00e1s que poner la URL de la web que quieras revisar.<\/p>\n
Browserstack<\/h3>\n
$\"Browserstack\"$ <\/p>\n
Browser Stack<\/strong> es una herramienta 100% online con la que puedes revisar cualquier web.<\/p>\n
Cuando realizas una consulta, aparece en los distintos dispositivos, literalmente, ya que han a\u00f1adido una muestra de cada uno de ellos, con sus nots<\/em>, bordes, etc… para que veas, de verdad, c\u00f3mo queda la web en los\u00a0<\/strong>dispositivos<\/b>.<\/p>\n
Entre los dispositivos encontraremos los m\u00e1s utilizados, como el iPhone X, Galaxy Note, Google Pixel y muchos m\u00e1s.<\/p>\n
Tambi\u00e9n encontraremos tabletas como el iPad o el Kindle Fire, as\u00ed como resoluci\u00f3n en monitores de escritorio.<\/p>\n
Una forma muy \u00abvisual\u00bb<\/em> de ver el resultado final, con el \u00fanico inconveniente de que te pedir\u00e1n un registro para poder continuar con la visualizaci\u00f3n.<\/p>\n
\n
Browserstack.com<\/a><\/strong><\/li>\n<\/ul>\n
<\/p>\n
Ui.dev<\/h3>\n
$\"Ui.dev\"$ <\/p>\n
<\/p>\n
Otro sitio web que podemos visitar para comprobar c\u00f3mo es de responisve<\/em> nuestra web, es Ui.dev<\/strong>.<\/p>\n
Aqu\u00ed el funcionamiento es m\u00e1s sencillo si cabe. No dispone de una lista de dispositivos con, con su nombre, modelo, marca, etc…, pero si tiene cuatro dispositivos, que son:<\/p>\n
\n
Una pantalla de escritorio<\/li>\n
Un ordenador port\u00e1til<\/li>\n
Una tablet<\/li>\n
Un m\u00f3vil<\/li>\n<\/ul>\n
Al a\u00f1adir la URL, veremos c\u00f3mo queda el sitio en estos 4 dispositivos, incluso podemos hacer scroll<\/em> independiente en cada uno de ellos. M\u00e1s sencillo imposible.<\/p>\n
\n
Ui.dev<\/a><\/strong><\/li>\n<\/ul>\n
<\/p>\n
Website Responsive Rest<\/h3>\n
$\"Website$ <\/p>\n
<\/p>\n
Website Responsive Rest<\/strong> es otra web, muy r\u00e1pida y efectiva, para comprobar si el dise\u00f1o de nuestra web es adaptable a todo tipo de resoluciones.<\/p>\n
Aqu\u00ed no tenemos modelos de m\u00f3vil, pero si tenemos resoluciones de pantalla<\/strong>.<\/p>\n
S\u00f3lo tenemos que poner la URL en el campo de b\u00fasqueda y al instante lo veremos en la pantalla.<\/p>\n
Cada cambio de resoluci\u00f3n de pantalla es inmediato y nos indica a qu\u00e9 tipo de m\u00f3viles corresponde esa resoluci\u00f3n.<\/p>\n
Tambi\u00e9n recrean algunos de los dispositivos que coincide con la resoluci\u00f3n elegida, pero no con todos.<\/p>\n
\n
Websiteresponsivetest.com<\/a><\/strong><\/li>\n<\/ul>\n
<\/p>\n
Responsive Design Checker<\/h3>\n
$\"Responsive$ <\/p>\n
<\/p>\n
Otra opci\u00f3n que podemos utilizar para ver si nuestros dise\u00f1os son todo adaptables que pensamos que son es Responsive Design Checker<\/strong>.<\/p>\n
Aqu\u00ed s\u00f3lo tienes que a\u00f1adir la URL en la b\u00fasqueda y aparecer\u00e1 de inmediato.<\/p>\n
Ala izquierda tenemos los iconos de un ordenador, una tablet y un m\u00f3vil, si los pulsamos aparecer\u00e1n distintas resoluciones y los dispositivos que \u00abencajan\u00bb<\/em> en estas resoluciones.<\/p>\n
S\u00f3lo tenemos que ir pulsando cada una de ellas para ver el resultado.<\/p>\n
Si ninguna de las resoluciones nos encaja, podemos modificarla por la que queramos<\/strong>, as\u00ed ver c\u00f3mo queda en dispositivos m\u00e1s actuales, ya que los que aparecen en la lista son algo \u00abantiguos\u00bb<\/em>.<\/p>\n
Eso s\u00ed, tenemos que saber cu\u00e1l es la resoluci\u00f3n de pantalla del dispositivo.<\/p>\n
\n
\n
\n
Responsivedesignchecker.com<\/a><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
\u00a1\u00a1\u00a1Y eso es todo!!! Esperamos que os haya servido de utilidad este art\u00edculo sobre c\u00f3mo usar Google Chrome para ver c\u00f3mo queda una web en un dispositivo m\u00f3vil.<\/p>\n
Herramientas Alternativas para Pruebas de Responsividad<\/h2>\n
CrossBrowserTesting<\/h3>\n
CrossBrowserTesting<\/a> es una plataforma integral que ofrece una soluci\u00f3n de pruebas en distintos navegadores y dispositivos.<\/p>\n
Esta herramienta permite a los usuarios comprobar la compatibilidad de su sitio web en m\u00e1s de 1500 navegadores y dispositivos m\u00f3viles reales<\/strong>.<\/p>\n
Lo destacable de CrossBrowserTesting es su capacidad para realizar pruebas de responsividad, pruebas automatizadas de Selenium y capturas de pantalla en m\u00faltiples entornos, todo en una plataforma basada en la nube.<\/p>\n
Es ideal para asegurarse de que tu sitio web ofrece una experiencia de usuario coherente y de alta calidad en cualquier plataforma o dispositivo.<\/p>\n
LambdaTest<\/h3>\nLambdaTest<\/a> 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.<\/p>\n
Con LambdaTest<\/strong>, 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\u00f3viles y de escritorio.<\/p>\n
Ofrece caracter\u00edsticas como pruebas de captura de pantalla automatizadas, pruebas de navegador cruzado y soporte para pruebas de Selenium<\/strong>.<\/p>\n
Esta herramienta es especialmente \u00fatil para equipos de desarrollo y QA que buscan agilizar su proceso de pruebas y garantizar la compatibilidad universal.<\/p>\n
Screenfly<\/h3>\nScreenfly<\/a> por QuirkTools es una herramienta gratuita y f\u00e1cil de usar para probar tu sitio web en diferentes tama\u00f1os de pantalla y dispositivos.<\/p>\n
Simplemente ingresa la URL de tu sitio y Screenfly<\/strong> te mostrar\u00e1 c\u00f3mo se ve en varios dispositivos, incluyendo tablets, tel\u00e9fonos y monitores<\/strong> de diferentes resoluciones.<\/p>\n
Esta herramienta es excelente para obtener una vista r\u00e1pida de la responsividad de tu sitio web sin necesidad de configuraciones complicadas o instalaciones de software.<\/p>\n
Su interfaz intuitiva hace que sea f\u00e1cil de usar para principiantes y profesionales por igual.<\/p>\n
Conclusiones<\/h2>\n
En el mundo actual, no podemos obviar la importancia de un dise\u00f1o web responsive<\/strong>. Asegura que los sitios web se visualicen correctamente<\/strong> en todo tipo de dispositivos, facilitando una navegaci\u00f3n fluida y accesible<\/strong> para todos los usuarios.<\/p>\n
Google Chrome es una herramienta bastante \u00fatil, ofreciendo a los desarrolladores una serie de funcionalidades integradas que facilitan la visualizaci\u00f3n y prueba de sitios web en diferentes dispositivos y resoluciones<\/strong>.<\/p>\n
Esto no solo facilita la tarea de ajustar y optimizar el dise\u00f1o de una p\u00e1gina web, sino que tambi\u00e9n contribuye a una experiencia de usuario<\/strong> m\u00e1s inclusiva y satisfactoria.<\/p>\n
Pero no todo se limita a las herramientas que ofrece Google Chrome. Hay una variedad de plataformas online que tambi\u00e9n pueden ayudarte a verificar c\u00f3mo se ve tu dise\u00f1o en distintos tipos de pantalla, algo muy \u00fatil para los desarrolladores web.<\/p>\n
Recuerda que necesitas un hosting web<\/strong><\/a> para alojar tus proyectos online, y en eso Hostinet<\/strong> puede ayudarte, ya que tenemos m\u00e1s de 20 a\u00f1os de experiencia<\/strong> ofreciendo servicio de hosting y dominios.<\/p>\n
<\/p>\n
Preguntas Frecuentes (FAQ)<\/h2>\n
\n
\u00bfQu\u00e9 es el dise\u00f1o responsive?<\/strong>
\nEs una t\u00e9cnica de dise\u00f1o web que permite que una p\u00e1gina se visualice correctamente en diferentes dispositivos, ajust\u00e1ndose a diversas resoluciones de pantalla.<\/li>\n
\u00bfC\u00f3mo puedo verificar la responsividad de mi sitio web usando Google Chrome?<\/strong>
\nPuedes utilizar las \u00abHerramientas para desarrolladores\u00bb de Google Chrome, que te permiten visualizar tu p\u00e1gina web en diferentes dispositivos y resoluciones. Los pasos detallados est\u00e1n explicados en el art\u00edculo.<\/li>\n
\u00bfQu\u00e9 hago si el dispositivo que quiero emular no est\u00e1 en la lista de Google Chrome?<\/strong>
\nGoogle Chrome te permite a\u00f1adir dispositivos personalizados especificando detalles como el nombre, la resoluci\u00f3n y si es t\u00e1ctil o no, a trav\u00e9s de la opci\u00f3n \u00abAdd custom device\u00bb en las herramientas para desarrolladores.<\/li>\n
\u00bfExisten otras herramientas adem\u00e1s de Google Chrome para verificar la responsividad de un sitio web?<\/strong>
\nS\u00ed, existen varias herramientas en l\u00ednea como Browserstack, Ui.dev, Website Responsive Test y Responsive Design Checker que permiten verificar la responsividad de un sitio web.<\/li>\n
\u00bfQu\u00e9 tipo de hosting deber\u00eda elegir para mi sitio web?<\/strong>
\nLa elecci\u00f3n del hosting depende de tus necesidades espec\u00edficas. En el art\u00edculo se mencionan diferentes tipos de planes de hosting como Linux SSD, CMS, Correo y Windows, cada uno con caracter\u00edsticas distintas.<\/li>\n
\u00bfQu\u00e9 es Browserstack y c\u00f3mo funciona?<\/strong>
\nBrowserstack es una herramienta en l\u00ednea que permite visualizar c\u00f3mo se ve una p\u00e1gina web en diferentes dispositivos y resoluciones de pantalla, ofreciendo una vista muy visual y detallada, aunque requiere registro para continuar con la visualizaci\u00f3n.<\/li>\n
\u00bfC\u00f3mo puedo utilizar Ui.dev para verificar la responsividad de mi sitio web?<\/strong>
\nUi.dev es una herramienta sencilla que permite visualizar c\u00f3mo se ve una p\u00e1gina web en cuatro tipos de dispositivos: una pantalla de escritorio, un ordenador port\u00e1til, una tablet y un m\u00f3vil, simplemente ingresando la URL del sitio web que deseas revisar.<\/li>\n<\/ol>\n
\n
\u00bfNecesitas un alojamiento web de calidad y ultra-r\u00e1pido?<\/strong><\/h2>\nEn Hostinet te lo ponemos muy f\u00e1cil y, por muy poco al mes, puedes contratar un alojamiento web ultra-r\u00e1pido con discos NVMe <\/strong><\/a>para garantizar el \u00e9xito de tu proyecto web en Internet.<\/p>\n
Hosting SSD<\/strong><\/h2>\n
\n
\n
\n
\n
\n SSD 1<\/span>\n <\/span>\n 2<\/span>\n \n \u00b400<\/span>\n \u20ac\/mes<\/span>\n <\/span><\/span>