¿Cómo puedo abrir rápidamente una vista móvil de una página en un navegador de escritorio?


49

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?


23
"Ya que ahora estamos en un mundo móvil primero" Woah allí un minuto ... el contexto es para reyes.
Lightness compite con Monica

3
Solo un comentario: no conozco realmente el contexto, pero si me pidieran que abriera páginas web desde mi computadora de escritorio / portátil en la vista móvil primero ... ¿cuál es el punto de usar el escritorio? Espero que "alentar" no lo esté forzando a través de algún código u otro método. Sobre todo porque muchas páginas web que tienen formato para dispositivos móviles se reducen bastante y no tienen una funcionalidad completa.
BruceWayne

1
Agregue un agente de usuario de cambio o una extensión similar o conéctese a su navegador y configure un agente de usuario de teléfono inteligente.
Salman A

1
"Me gustaría animar a las personas a que abran regularmente sitios web desde sus navegadores de escritorio en una vista móvil". ... Eso es una tontería. ¿Y desperdiciar todo ese espacio en la pantalla del escritorio? Las computadoras de escritorio y los dispositivos móviles tienen su lugar, y es por eso que se han desarrollado soluciones receptivas . Ofrezcamos la mejor experiencia posible para cada usuario y dejemos que las personas naveguen en el dispositivo que les resulte más cómodo. De todos modos, una pregunta válida, ya que los diseñadores y desarrolladores web necesitan emular múltiples dispositivos al construir sitios.
Mentalista

2
@Mentalista Me refería a personas que trabajan en sitios web y ofertas de redes sociales.
Flimm

Respuestas:


91

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 receptivo".

Cromo:

Primero debe tener "Herramientas para desarrolladores" abiertas:

  • 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 abrir la barra de herramientas del dispositivo:

  • En Windows / Linux, presione Ctrl+ Shift+M
  • En macOS, presione command+ shift+M

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:

  • Presione F12para abrir las herramientas de desarrollador y luego Ctrl+ 7para abrir la "pestaña Emulación". Configure el dispositivo que desea emular.

Puede abrir las herramientas de desarrollador con el mouse haciendo clic derecho dentro de la página web y seleccionando "inspeccionar elemento".


1
Tenga en cuenta que ctrl shift M solo funciona si las herramientas del desarrollador ya están abiertas
Naramsim

3
@Naramsim Gracias. Eso solo se aplica a Chrome. He editado mi respuesta.
Flimm

3
Para Windows / Chrome, F12 es una forma potencialmente más fácil de acceder a Dev Tools ... aunque si la siguiente pulsación de teclas será Ctrl-Shift-M, supongo que comenzar con Ctrl-Shift-I puede ser más lógico.
sǝɯɐs

Creo que en versiones anteriores de Safari Cmd + Shift + R abriría el modo de diseño receptivo. Parece que no existe en la última versión a menos que la enlace manualmente
Downgoat

Chrome recuerda si quería una vista previa móvil, por lo que una vez que la haya habilitado, puede alternar entre móvil / escritorio simplemente usando F12
Pieter De Bie

11

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:

cromo

O con Firefox:

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.


1
¿A qué software se refiere la primera parte?
Kamil Maciorowski

@KamilMaciorowski DevTools es la herramienta para desarrolladores que se encuentra en Chrome y Opera.
OptimusCrime

@KamilMaciorowski Esto no es un software, está disponible en cualquiera de sus navegadores web. Específicamente si está usando Chrome, haga clic derecho en cualquier ventana y haga clic en inspeccionar y verá esta ventana en su navegador acoplado debajo o a la derecha del navegador. Estos se conocen más comúnmente como Dev Tools.
Shobhit Garg

@Shobbit Garg ¿Es esa la ventana que se abre cuando presiono CTRL + Shift + C?
daniel.neumann

@ daniel.neumann Lamentablemente uso mac, así que no puedo probar y ver qué sucede cuando presiono esas teclas. Pero haciendo referencia a los accesos directos enumerados anteriormente, esta ventana debe abrir presionando "ctrl + shift + I" en Chrome, "ctrl + shift + M" en firefox o presionando f12 en IE / Edge.
Shobhit Garg


1

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.


1
Esto es incorrecto. Los diseños móviles deberían funcionar en función de las dimensiones del dispositivo / pantalla a través de consultas de medios CSS, no de cadenas de agente de usuario; ya no es 2006.
PiX06

La herramienta de la mayoría de los navegadores que permite una vista móvil también le permite configurar un agente de usuario al mismo tiempo.
Flimm

1
@ PiX06, entonces no es necesario ningún esfuerzo. ¡Solo cambia el tamaño de la ventana del navegador!
Salman A

Desafortunadamente, me encuentro con muchas preguntas: de todos modos, si cambio el tamaño de la ventana del navegador, ¿por qué tengo que molestarme con los agentes de usuario? ¿A qué dimensiones debo cambiar el tamaño de la ventana? ¿Cómo mido la ventana?
Mathieu K.

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.