Cómo ver la versión móvil de un sitio web en una PC

Si es desarrollador web o posee un negocio en línea, es posible que sienta curiosidad por saber cómo se ve un sitio móvil en una computadora de escritorio. El aspecto y la funcionalidad de su sitio móvil pueden ser cruciales porque 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 un sitio o compren algo si es visualmente atractivo. Una vista de escritorio también puede ayudarlo a realizar cambios y solucionar posibles problemas antes.

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

Cómo ver la versión móvil de un sitio web en Chrome en una Mac

En Chrome, puede probar el front-end y ver si todos los componentes del sitio web funcionan correctamente utilizando una herramienta de desarrollo integrada llamada DevTools. Debido a que proporciona opciones de dispositivo predefinidas, DevTools es la mejor manera para que el desarrollador cambie rápidamente la vista de escritorio a móvil y viceversa sin ninguna extensión de desarrollador.

También puede cambiar el tamaño de la pantalla para que se adapte a sus necesidades y ajustar el ancho y la altura 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 navegue hasta el sitio que desea ver.
   
2. Presione F12 en su teclado para acceder a DevTools.
   
3. Cuando el modo esté activado, haga clic en el icono "Alternar emulación de dispositivo".
   
4. Puede elegir de una lista de dispositivos iOS y Android para emular.
   
5. Mostrará el sitio web en el formulario móvil que haya 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 de un sitio web en Chrome en una PC con Windows

Si desea ver una versión móvil de un sitio web en una PC con Windows en Chrome, el proceso es 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 derecho en la página web y selecciona "Inspeccionar" en el menú.
   
4. Para acceder a DevTools, haga clic en la pestaña "Más herramientas" y seleccione "Herramientas para desarrolladores" o presione F12 para abrir DevTools.
   
5. Se abrirá la ventana Herramientas para desarrolladores.
6. Haga clic en el icono de alternar dispositivo para cambiar al modo de vista de sitio móvil.
   
7. Elija el dispositivo móvil que desea emular (opcional).
   
8. Ahora puede cambiar las dimensiones de la pantalla según sea necesario.

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

Acceder a la versión móvil de un sitio web en Chrome utilizando un Chromebook es muy similar a los dos primeros métodos.

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 con tres puntos verticales.
   
4. Pase el mouse sobre el elemento Más herramientas en la lista.
   
5. Selecciona "Herramientas para desarrolladores".
   
6. Se abrirá la ventana Herramientas para desarrolladores en el navegador.
   
7. Alterne el modo de visualización del sitio móvil haciendo clic en el icono de alternancia del dispositivo.
   

Esto abrirá la interfaz de usuario del sitio móvil. También puede elegir la experiencia de dispositivo preferida 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 de un sitio web en Firefox en una Mac

Puede usar otros navegadores web como Firefox para ver un sitio móvil en una computadora de escritorio Mac. Cambiar el tamaño de la ventana del navegador es uno de los métodos que la mayoría de los desarrolladores web utilizan para evaluar el sitio web de diseño receptivo. Sin embargo, la mayoría de las veces, esta alternativa no parecerá aceptable.

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

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

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

Las PC con Windows también tienen la capacidad de ver versiones móviles de sitios web usando Firefox. Así es cómo:

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

Cómo ver la versión móvil de un sitio web en Safari en una Mac

Hemos cubierto cómo ver un sitio web móvil en una computadora de escritorio usando Chrome y Firefox. Pero, ¿qué pasa con el navegador predeterminado que viene con los dispositivos Mac, Safari? Afortunadamente, también es posible ver una versión móvil de un sitio web en Safari.

1. Inicie el navegador Safari.
   
2. Vaya al sitio web que desea ver en la versión móvil.
   
3. Haz clic en "Opciones" y luego en el menú "Desarrollar".
   
4. En el menú desplegable, elija "Ingresar al modo de diseño receptivo".
   
5. Ahora puede ver la versión móvil del sitio web.
   

Preguntas frecuentes adicionales

¿Puedo ver la versión de escritorio de un 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 verificarlo sin usar una computadora. Los pasos para cambiar de la versión móvil a la versión de escritorio en Chrome son los siguientes:

1. Navegue hasta el sitio web que desea mostrar en el escritorio.

2. Toque el icono de tres puntos para acceder al menú.

3. Ahora seleccione la opción "Vista de escritorio".

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

Facilitar el diseño de sitios web móviles

Las herramientas para desarrolladores son excelentes para analizar y editar una versión móvil de un sitio web en una computadora de escritorio sin cambiar de dispositivo. Puede cambiar el tamaño de la pantalla para ver cómo funcionan los componentes en varios dispositivos. Puede ajustar diferentes componentes y hacer que el sitio web se adapte a varios tamaños de pantalla utilizando el modo de respuesta.

Al diseñar un sitio web, el diseñador siempre debe tener en cuenta cómo se ve la interfaz del sitio en teléfonos, tabletas y computadoras de escritorio. El uso de los métodos descritos en el artículo también puede ayudar al desarrollador a hacer esto e identificar los componentes de un sitio web que están creando problemas para solucionarlos.

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