Dado que ahora estamos en un mundo móvil primero, se vuelve cada vez más importante poder probar sitios web fácilmente en teléfonos móviles o en teléfonos móviles emulados. Colaboro con personas que trabajan en sitios web y ofertas de redes sociales, y me gustaría alentarlos a que abran regularmente sitios web desde sus navegadores de escritorio en una vista móvil. Estoy pensando específicamente en la función de "vista móvil" incorporada en el navegador, que a menudo está oculta entre todas las otras herramientas de desarrollador que proporciona un navegador, pero estoy feliz de considerar cualquier cosa que sea tan rápida de configurar.
¿Cómo puede abrir una vista móvil de un sitio web desde un navegador de escritorio?
Respuestas:
Firefox
También puede encontrar el elemento del menú en ("Herramientas"), "Desarrollador web", "Modo de diseño receptivo".
Cromo:
Primero debe tener "Herramientas para desarrolladores" abiertas:
Una vez que las herramientas de desarrollador están abiertas y enfocadas, puede abrir la barra de herramientas del dispositivo:
También puede encontrar el elemento del menú abriendo las herramientas de desarrollador ("Más herramientas", "Herramientas de desarrollo") y luego haciendo clic en el icono que se parece a un teléfono móvil frente a la tabla "Alternar la barra de herramientas del dispositivo".
Safari:
Parece que Apple ha deshabilitado por defecto el atajo de teclado para ingresar al modo de diseño receptivo. Puede seguir este tutorial sobre cómo configurar un atajo de teclado para él .
Puede encontrar el elemento del menú haciendo clic en "Desarrollar", "Ingresar al modo de diseño receptivo". Si no puede ver el elemento de menú "Desarrollar", debe habilitarlo abriendo "Preferencias", "Avanzado" y marcando "Mostrar menú Desarrollar en la barra de menú".
Borde:
Puede abrir las herramientas de desarrollador con el mouse haciendo clic derecho dentro de la página web y seleccionando "inspeccionar elemento".
fuente
La respuesta de Flimm es 100% correcta. En caso de que recordar los accesos directos sea demasiado complicado, es este botón azul en las Herramientas del desarrollador para alternar entre la vista web y la vista móvil / tableta:
O con Firefox:
Después de habilitar la barra de herramientas del dispositivo, puede elegir la marca y el modelo del dispositivo que desea emular en el menú desplegable.
fuente
Para fines de prueba, utilizo los siguientes sitios web: -
Los dos sitios anteriores me permiten ver mi aplicación web en varios anchos de dispositivo.
fuente
Agregue una extensión de "conmutador de agente de usuario" en su navegador y especifique un agente de usuario móvil. Si el sitio web es lo suficientemente inteligente , le servirá una versión optimizada para dispositivos móviles.
No recomendaré ninguna extensión específica. El ideal debe tener preajustes para navegadores móviles integrados y la capacidad de habilitar o deshabilitar el cambio de agente de usuario por sitio web.
fuente
Las respuestas anteriores son excelentes para aquellos a quienes les gusta quedarse con un solo navegador, o tienen un "espacio de trabajo" de escritorio limitado (por ejemplo, un solo monitor de menos de 21 "a baja resolución).
De hecho, hay una solución aún más interesante que he descubierto recientemente: https://blisk.io/
Me abstendré de usar el (tipo de) "enlace de afiliado" para cualquier ganancia personal (Hay un "sistema basado en tokens" que puede obtener créditos para obtener cosas como "espacio en la nube del equipo" y "características premium" para usar con ), pero Blisk es bastante elegante.
Este "navegador creado para el desarrollo" basado en Chromium ofrece una multitud de formas de mostrar la página en varios dispositivos con un "panel" vertical en el lado IZQUIERDO, al igual que ves las Herramientas para desarrolladores de Chrome predeterminadas en la columna vertical derecha.
Es trabajar un vistazo. Aunque hay algunos límites para su "funcionalidad extendida de freemium", todavía funciona muy bien para "previsualizar" tanto la versión para PC como la versión móvil de sus páginas / sitios en una comparación lado a lado. Las funciones pagadas también parecen bastante radicales si trabaja en equipos remotos (aunque personalmente creo que necesita un mejor programa de "prueba de manejo" antes de enganchar a las personas con el costo mensual).
Divulgación completa: hay un "límite de tiempo" EXTREMADAMENTE molesto por día en la parte de vista previa móvil (se abre / cierra desde el ícono a la derecha de la barra de direcciones; cambie la "vista previa del dispositivo" desde el pequeño enlace al- menú en la esquina superior derecha "Mostrar lista de dispositivos").
BliskDemoScreenshot
Además: he encontrado algunos trucos realmente ingeniosos con las Extensiones del navegador, como los 2 "Conmutadores de agente de usuario" diferentes de Chrome / Firefox que van un poco más allá al permitirle alternar entre las cadenas de agente de usuario del navegador de varios Sistemas operativos Y los navegadores para ellos.
Prefiero el sabor "esolutions.se" debido a lo fácil que es agregar cadenas de agente de usuario personalizadas a la lista para todas las personalizaciones que pueda desear (también se ejecuta sin conexión, lo que puede ser útil en ciertos casos): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae
De todos modos, esos son mis 2 centavos. :PAGS
fuente