Si es desarrollador web o posee un negocio en línea, es posible que tenga curiosidad por saber cómo se ve un sitio móvil en una computadora de 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 un sitio o compren algo si es visualmente atractivo. Una vista de escritorio también podría ayudarlo a realizar ediciones y solucionar posibles problemas antes.
Afortunadamente, este es un proceso relativamente sencillo. 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 la interfaz y ver si todos los componentes del sitio web funcionan correctamente mediante 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 ajuste 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 hacerlo en una Mac, sigue estos pasos:
- Inicie el navegador Google Chrome y vaya al sitio que desea ver.
- Presiona F12 en tu teclado para acceder a DevTools.
- Cuando el modo esté activado, haga clic en el icono Alternar emulación de dispositivo.
- Puede elegir entre una lista de dispositivos iOS y Android para emularlos.
- 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 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, es un proceso bastante similar:
- Abre el navegador Chrome.
- En Chrome, ve al sitio web que deseas ver en la versión móvil.
- Haga clic derecho en la página web y seleccione Inspeccionar en el menú.
- Para ir a Herramientas para desarrolladores, haga clic en la pestaña Más herramientas y seleccione Herramientas para desarrolladores o presione F12 para abrir DevTools.
- Se abrirá la ventana Herramientas para desarrolladores.
- Haga clic en el icono de cambio de dispositivo para cambiar al modo de vista de sitio móvil.
- Elige el dispositivo móvil que te gustaría emular (opcional).
- Ahora puede modificar las dimensiones de la pantalla para adaptarla a sus necesidades.
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.
- Abra el navegador web Google Chrome.
- Abra la página web a la que desea acceder en su dispositivo móvil.
- Para acceder al menú, haga clic en el icono de tres puntos verticales.
- Arrastre el mouse sobre el elemento Más herramientas en la lista.
- Seleccione Herramientas para desarrolladores.
- Se abrirá la ventana Herramientas para desarrolladores en el navegador.
- 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 para el sitio móvil. También puede elegir la experiencia de dispositivo preferida seleccionando la marca y el modelo en el cuadro 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.
Ahí es donde las capacidades de desarrollo web del navegador Firefox son ú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:
- Abra la versión móvil del sitio web que desea ver.
- Haga clic derecho en la página web y seleccione la opción Inspeccionar del menú.
- Elija el modo de diseño receptivo.
- Elija el tamaño de 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 opción de ver versiones móviles de sitios web usando Firefox. He aquí cómo hacerlo:
- Inicie Firefox en su PC.
- Vaya al sitio web que desea ver como una versión móvil.
- Vaya a Configuración haciendo clic en el icono de tres barras horizontales.
- Verá un menú desplegable donde tendrá que elegir una opción de desarrollador web.
- Seleccione el modo de diseño receptivo.
- Finalmente, puede seleccionar un modelo de teléfono inteligente para ver cómo aparecerá 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.
- Inicie el navegador Safari.
- Vaya al sitio web que desea ver como una versión móvil.
- Haga clic en Opciones y luego en el menú Desarrollar.
- En el menú desplegable, elija Ingresar al modo de diseño receptivo.
- 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 comprobarlo sin usar una computadora. Los pasos para cambiar la versión móvil a la versión de escritorio en Chrome son los siguientes:
1. Vaya al sitio web que desea ver en la vista de escritorio.
2. Pulse sobre el icono de tres puntos para acceder al menú.
3. Seleccione la opción Vista de escritorio ahora.
Tenga en cuenta que estos pasos pueden variar según el teléfono que esté utilizando.
cómo encontrar a alguien en Snapchat
Facilitar el diseño web móvil
Las herramientas para desarrolladores son excelentes para analizar y modificar 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 observar cómo funcionan los componentes en varios dispositivos. Puede ajustar diferentes componentes y crear el sitio web para múltiples 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 aparece 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 hacerlo y también a identificar qué componentes de un sitio web están creando problemas para solucionarlos.
¿Alguna vez ha intentado ver una versión móvil de un sitio en su escritorio? ¿Qué navegador prefieres usar para hacerlo? Háganos saber en la sección de comentarios.
