Dado que ahora estamos en un mundo en el que los dispositivos móviles son lo 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 animarlos a que abran sitios web con regularidad desde sus navegadores de escritorio en una vista móvil. Estoy pensando específicamente en la función integrada de "vista móvil" del navegador, que a menudo está oculta entre todas las demás herramientas de desarrollo que proporciona un navegador, pero estoy feliz de considerar cualquier cosa que sea igual de rápida de configurar.
¿Cómo se puede abrir una vista móvil de un sitio web desde un navegador de escritorio?
Respuesta1
Firefox:
- En Windows/Linux, presione Ctrl+ Shift+M
- En macOS, presione option+ command+M
También puede encontrar el elemento del menú en ("Herramientas"), "Desarrollador web", "Modo de diseño responsivo".
Cromo y borde:
Primero debes tener abiertas las "Herramientas de desarrollo":
- En Windows/Linux, presione Ctrl+ Shift+ Io simplementeF12
- En macOS, presione option+ command+I
Una vez que las herramientas de desarrollador estén abiertas y enfocadas, puede alternar la emulación de dispositivo:
- En Windows/Linux, presione Ctrl+ Shift+M
- En macOS, presione command+ shift+M
Hay un pequeño botón en la barra de herramientas del desarrollador que permite la emulación de dispositivos, si prefiere hacer clic en un botón en lugar de presionar un atajo de teclado.
Safari:
Parece que Apple ha desactivado de forma predeterminada el método abreviado de teclado para ingresar al modo de diseño responsivo. puedes seguireste tutorial sobre cómo configurar un atajo de teclado para ello.
Puede encontrar el elemento del menú haciendo clic en "Desarrollar", "Ingresar al modo de diseño responsivo". Si no puede ver el elemento del menú "Desarrollar", debe habilitarlo abriendo "Preferencias", "Avanzado" y marcando "Mostrar menú de Desarrollo en la barra de menú".
Respuesta2
La respuesta de flimmes 100% correcto. En caso de que recordar los atajos sea demasiado complicado, es este botón azul en las Herramientas de desarrollo 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.
Respuesta3
Para realizar pruebas, utilizo los siguientes sitios web: -
Los dos sitios anteriores me permiten ver mi aplicación web en múltiples anchos de dispositivo.
Respuesta4
Agregue una extensión de "cambiador de agente de usuario" en su navegador y especifique un agente de usuario móvil. Si el sitio web eselegantesuficiente, le servirá la versión optimizada para dispositivos móviles.
No recomendaré ninguna extensión específica. Lo ideal debería tener ajustes preestablecidos para navegadores móviles integrados y la capacidad de habilitar o deshabilitar el cambio de agente de usuario por sitio web.