Ver web en diferentes dispositivos

Cómo probar el sitio web en diferentes dispositivos móviles

Si usas Firefox 15 o posterior, puedes usar la vista de diseño responsivo pulsando Ctrl-Shift-M o yendo al menú de Firefox -> Desarrollador web -> Vista de diseño responsivo. Eso te permite cambiar fácilmente el tamaño de la página (de una lista de resoluciones comunes, o arbitrariamente arrastrando los bordes) sin tener que cambiar el tamaño de la ventana del navegador (además de permitirte cambiar el tamaño más grande que tu ventana). Es posible que otros navegadores tengan una función similar, pero no estoy seguro.

Utiliza el atajo de teclado Ctrl + SHIFT + I, O ve a Menú (icono de tres puntos arriba a la derecha) > F12 Herramientas de desarrollo para abrir el menú de herramientas de desarrollo, y luego ve a la pestaña Emulación para ver las opciones para personalizar la ventana a diferentes tamaños y dimensiones de dispositivos.

Probar el sitio web en diferentes navegadores

La forma más sencilla de probar cómo funcionan las cosas en los móviles sería con el modo responsivo de F12 Developer Tools (F12 y luego CTRL + SHIFT + M). Esto viene precargado con un buen número de dispositivos comunes, pero puedes añadir tus propias dimensiones personalizadas. Y puedes obtener una lista de dimensiones de pantalla de dispositivos comunes para esto desde ScreenSiz.Es.

Puedes utilizar las herramientas para desarrolladores de Chrome para ver cómo se ve tu sitio web en modo responsivo en varios dispositivos. No se trata de dispositivos reales, sino de emuladores que muestran el aspecto de la página en diferentes tamaños de pantalla.

También existe la opción de utilizar el Simulador iOS de XCode o los Emuladores Android de Android Studio para ejecutar un navegador en un dispositivo emulado. Esto se acerca más al aspecto que tendrá tu página, pero sigue ejecutándose en un dispositivo emulado.

Si quieres probar en dispositivos reales, tendrás que crear tu propio mini-laboratorio de pruebas de dispositivos móviles, o utilizar un servicio como TestingBot que aloja varios dispositivos físicos en un centro de datos, que puedes utilizar para comprobar tu sitio web.

Cómo comprobar la capacidad de respuesta de un sitio web en chrome

Hoy en día, para encontrar lo que le interesa, sólo necesita unos segundos. Ya no dependes de los ordenadores, sino que puedes buscar información rápidamente utilizando varios dispositivos: ordenadores portátiles, teléfonos inteligentes, tabletas e incluso smartwatches.

El diseño web responsivo es un diseño que satisface plenamente las necesidades de los usuarios y se visualiza sin problemas en cualquier tipo de dispositivos y navegadores. El diseño debe adaptarse automáticamente a los diferentes tamaños y capacidades de los distintos dispositivos, teniendo en cuenta que el usuario no utiliza los “clics” sino el “tacto”.

Los emuladores son una herramienta que le ayuda a ver cómo se mostrará su sitio web en diferentes modelos de teléfono, sistemas operativos y tabletas en diferentes tipos de navegadores. No es necesario instalar Emuladores para obtener los datos.

Responsinator es quizás una de las herramientas más sencillas. Te muestra cómo se verá tu sitio en determinados tipos de dispositivos. Introduce la URL de tu sitio y espera unos segundos para ver los datos de tu página. La herramienta muestra la vista vertical y horizontal en diferentes dispositivos.

Probar el sitio web en diferentes tamaños de pantalla

Estoy desarrollando un sitio web móvil para iPhone, Android, etc. utilizando jQuery Mobile. Me gustaría poder probarlo en mi navegador de escritorio y me preguntaba cuál es el mejor enfoque. Supongo que podría usar un plugin para cambiar el encabezado User-Agent al valor apropiado y redimensionar manualmente el navegador al ancho del dispositivo, pero ¿hay alguna manera más simple/más confiable?

Conseguí buenos resultados, visualmente, usando el complemento de Chrome llamado Ripple Beta. Lo malo es que no hay posibilidad de añadir algún dispositivo personalizado, como tabletas de 8″ o 9″ o más grandes… pero funciona. No estoy seguro de si es capaz de mostrar algunos errores visibles en el dispositivo real, pero parece agradable.

Manymo debería funcionar muy bien simulando Android para ti. A mí me muestra exactamente lo que muestra mi móvil, aunque mis navegadores de escritorio no lo hacen. Manymo es un sitio web con un montón de teléfonos Android fotografiados. Sólo tienes que hacer clic en uno e introducir su URL. Hay opciones como versiones de Android y tamaños de pantalla.

Eduardo José Cazorla