Cómo ver la versión móvil del sitio en un PC

Si es desarrollador web o propietario de un negocio en línea, es posible que le interese saber cómo se ve un sitio web móvil en su escritorio. La apariencia y la funcionalidad de su sitio móvil pueden ser cruciales, ya que más de la mitad del tráfico de Internet proviene de los teléfonos. Es más probable que los clientes permanezcan más tiempo en el sitio o compren algo si es visualmente atractivo. La exploración de escritorio también puede ayudarlo a realizar cambios y solucionar posibles problemas más rápido.

Afortunadamente, este es un proceso relativamente simple. En este artículo, le mostraremos cómo ver la versión móvil del sitio web en diferentes dispositivos y navegadores.

Índice

Cómo ver la versión móvil del sitio web en Chrome en Mac

En Chrome, puede probar la interfaz y verificar que todos los componentes del sitio web funcionen correctamente, utilizando una herramienta de desarrollo integrada llamada DevTools. Debido a que proporciona una selección predeterminada de dispositivos, DevTools es la mejor manera para que un desarrollador transfiera rápidamente la visualización de un ordenador de escritorio a un dispositivo móvil y viceversa sin ninguna extensión para los desarrolladores.

También puede cambiar el tamaño de la pantalla para adaptarla a sus necesidades y ajustar el ancho y el alto de la pantalla para ver cómo se verá su sitio web en diferentes tamaños de pantalla. Para hacer esto en una Mac, siga estos pasos:

  1. Inicie el navegador Google Chrome y vaya al sitio que desea ver.
  2. Presione F12 en su teclado para acceder a DevTools.
  3. Si el modo está habilitado, haga clic en el icono "Cambiar emulación de dispositivo".
  4. Puede elegir de una lista de dispositivos iOS y Android para simularlos.
  5. Mostrará el sitio web en el formulario móvil que hayas elegido.

Cuando haya terminado, simplemente cierre la ventana de herramientas para desarrolladores para cerrar la versión móvil del sitio web.

Cómo ver la versión móvil del sitio web en Chrome en una PC con Windows

Si desea ver la versión móvil del sitio web en una PC con Windows en Chrome, este es un proceso bastante similar:

  1. Abre el navegador Chrome.
  2. En Chrome, vaya al sitio web que desea ver en la versión móvil.
  3. Haz clic con el botón derecho en la página web y selecciona "Comprobar" en el menú.
  4. Para ir a Herramientas para desarrolladores, haga clic en la pestaña "Herramientas avanzadas" y seleccione "Herramientas para desarrolladores" o presione F12 para abrir DevTools.
  5. Se abre la ventana Herramientas para desarrolladores.
  6. Haga clic en el ícono de interruptor del dispositivo para cambiar al modo de visualización del sitio móvil.
  7. Seleccione el dispositivo móvil que desea emular (opcional).
  8. Ahora puede cambiar el tamaño de la pantalla según sus necesidades.

Cómo ver la versión móvil del sitio web en Chrome en un Chromebook

Acceder a la versión móvil del sitio web en Chrome utilizando un Chromebook es muy similar a las dos primeras formas.

  1. Abra el navegador web Google Chrome.
  2. Abra la página web a la que desea acceder en su dispositivo móvil.
  3. Para acceder al menú, haga clic en el icono vertical con tres puntos.
  4. Arrastre el cursor del mouse al elemento Herramientas avanzadas en la lista.
  5. Selecciona "Herramientas para desarrolladores".
  6. La ventana Herramientas para desarrolladores se abre en un navegador.
  7. Cambie el modo de visualización del sitio móvil haciendo clic en el icono de cambio de dispositivo.

Esto abrirá la interfaz de usuario para el sitio móvil. También puede elegir la preferencia del dispositivo seleccionando la marca y el modelo de la lista desplegable. La página web se actualizará como un sitio de escritorio cada vez que cierre la consola de herramientas para desarrolladores.

Cómo ver la versión móvil del sitio web en Firefox en una Mac

Puede utilizar otros navegadores web, como Firefox, para ver su sitio móvil en el escritorio de su Mac. Cambiar el tamaño de la ventana de su navegador es uno de los métodos que la mayoría de los desarrolladores web utilizan para evaluar un sitio web con un diseño adaptativo. Sin embargo, en la mayoría de los casos esta alternativa será inaceptable.

Aquí es donde las capacidades de desarrollo web de Firefox resultan útiles. Puede ver sus páginas web en diferentes secciones si sabe cómo acceder a las versiones móviles de los sitios web de Firefox. Sigue estos pasos:

  1. Abra la versión móvil del sitio web que desea ver.
  2. Haga clic derecho en la página web y seleccione "Ver" en el menú.
  3. Seleccione "Modo de diseño receptivo".
  4. Seleccione el tamaño de pantalla del sitio web.

Cómo ver la versión móvil del sitio web en Firefox en una PC con Windows

Las ordenadors con Windows también tienen la capacidad de ver versiones móviles de sitios web usando Firefox. Aquí está cómo hacerlo:

  1. Inicie Firefox en su ordenador.
  2. Navegue hasta el sitio web que desea ver en la versión móvil.
  3. Vaya a "Configuración" haciendo clic en el icono horizontal con tres barras.
  4. Verá un menú desplegable donde deberá seleccionar la opción "Desarrollador web".
  5. Seleccione "Modo de diseño receptivo".
  6. Finalmente, puede elegir el modelo de su teléfono inteligente para ver cómo se verá su sitio web en este dispositivo.

Cómo ver la versión móvil del sitio web en Safari en Mac

Analizamos cómo ver un sitio web móvil en su escritorio usando Chrome y Firefox. Pero, ¿qué pasa con el navegador predeterminado que viene con los dispositivos Mac, Safari? Afortunadamente, Safari también tiene una versión móvil del sitio web.

  1. Inicie el navegador Safari.
  2. Navegue hasta el sitio web que desea ver como una versión móvil.
  3. Haga clic en "Opciones" y luego en el menú "Desarrollo".
  4. En el menú desplegable, seleccione "Ingresar al modo de diseño receptivo".
  5. Ahora puede ver la versión móvil del sitio.

Preguntas frecuentes adicionales

¿Puedo ver la versión de escritorio del sitio web en mi teléfono?

¡La respuesta es sí! Puede cambiar de la versión móvil a la versión de escritorio para probarlo sin usar un ordenador. Para migrar la versión móvil a la versión de escritorio en Chrome:

1. Navegue hasta el sitio web que desea ver en su escritorio.

2. Haga clic en el icono de tres puntos para acceder al menú.

3. Seleccione la opción "Ver escritorio".

Tenga en cuenta que estas acciones pueden variar según el teléfono que esté utilizando.

Diseño de sitio web móvil más fácil

Las herramientas para desarrolladores son excelentes para analizar y modificar una versión móvil de un sitio web en su escritorio sin cambiar de dispositivo. Puede cambiar el tamaño de la pantalla para observar cómo funcionan los componentes en diferentes dispositivos. Puede personalizar diferentes componentes y crear un sitio web para diferentes tamaños de pantalla utilizando el modo de respuesta.

Al diseñar un sitio web, un diseñador siempre debe tener en cuenta cómo se ve el sitio web en teléfonos, tabletas y ordenadors de escritorio. El uso de las técnicas descritas en el artículo también puede ayudar al desarrollador a hacer esto, así como a determinar qué componentes del sitio web están creando problemas para solucionarlos.

¿Alguna vez ha intentado ver la versión móvil del sitio en su escritorio? ¿Qué navegador prefieres usar para esto? Háganos saber en la sección de comentarios.


Si quieres conocer otros artículos similares a Cómo ver la versión móvil del sitio en un PC puedes visitar la categoría Windows.

Artículos de interés

Subir

Si continuas utilizando este sitio aceptas el uso de cookies. Más información