¿Cómo se ve una misma web en distintos navegadores, sistemas operativos y dispositivos?
Acceder a una página web parece algo sencillo, una acción que dura unos pocos segundos, desde que tecleas la dirección o la buscas en Google hasta que se muestra en pantalla.
Pero las páginas actuales son muy complejas. No les queda otra. Hay mucha competencia y es necesario ofrecer la mejor experiencia posible al usuario. Un ejemplo es que una página se ve diferente según qué navegador y plataforma utilizas: PC/Mac, smartphone, tablet, televisor inteligente…
Pero pueden darse casos no tan positivos, como no poder acceder a cierto contenido simplemente porque no es tal navegador, aunque en la práctica sea compatible, o ver un contenido diferente, como por ejemplo distintos precios en una tienda online.
A continuación vamos a ver cómo cambiar el User Agent o de Agente de Usuario de nuestro navegador web. Te será útil para engañar a ciertas páginas web a las que accedes y también, si eres diseñador o desarrollador web, para comprobar qué tal se ve tu sitio web o el de la competencia desde distintos navegadores.
Google Chrome
Empezamos por Chrome, el navegador más popular.
Lo normal es que el cambio de User Agent sea posible desde las opciones para desarrolladores que traen consigo los navegadores web pero que no están a la vista por defecto para evitar que toquemos lo que no debemos.
En Chrome, desde el botón de la esquina superior derecha, Más herramientas > Herramientas para desarrolladores.
Esto abrirá un nuevo panel en la mitad derecha del navegador, que muestra el código y archivos de la página en la que estés en ese momento. Entre otras cosas, puedes cambiar el User Agent y decirle a la página que se muestre como lo haría en otro dispositivo.
Para ello, tendrás que pulsar en el botón que muestra un smartphone y una tablet, el segundo por la izquierda de la barra superior del panel que hemos abierto.
Por defecto, se mostrará en formato móvil, pero puedes cambiar la resolución de la pantalla del dispositivo emulador o indicar que se trata de otro dispositivo, entre los que muestra Galaxy, Nexus, iPhone y iPad.
Si pulsas en Responsive > Edit… podrás activar más opciones por defecto, como o BlackBerry, Kindle Fire, Lumia e incluso puedes crear tus propios dispositivos para que las páginas se muestren como lo harían en ese navegador o dispositivo.
El cambio de User Agent en Chrome es básicamente para ver cómo se ven las páginas en distintos dispositivos. Si también quieres cambiar el tipo de navegador, prueba a crear perfiles de dispositivos a partir de la información de User Agent String.
Firefox
Con Mozilla Firefox también podemos ver una página web como si lo hiciéramos desde un smartphone o tablet o desde otro navegador.
Desde el menú en la esquina superior derecha, Desarrollador > Modo de diseño responsable cambiará la pestaña abierta para ver esa página según el tamaño de la pantalla del dispositivo simulado. Podemos elegir entre diferentes resoluciones disponibles, así como personalizar el User Agent.
Para personalizar el User Agent necesitamos la información disponible en User Agent String, que como hemos visto antes, indica los datos clave de cada navegador y plataforma. Una vez hemos pegado la información en el campo Agente de Usuario personalizado, tendremos que cambiar la resolución eligiendo la personalizada.
Si no te convence este método, prueba con el complemento User-Agent Switcher, con una lista de plataformas, dispositivos y navegadores preconfigurados a los que puedes acudir desde la barra de navegación y que puedes ampliar con otros User Agent.
Safari
Si utilizas Safari en tu Mac también puedes engañar páginas web para que se comporten como si accedieras desde otra plataforma o navegador.
Primero tendrás que activar el menú Desarrollo desde Safari > Preferencias > Avanzado > Mostrar el menú Desarrollo en la barra de menús.
Entonces verás el menú Desarrollo, entre Marcadores y Ventana, que te permite cambiar de User Agent. Desde Desarrollo > Agente de usuario verás Safari (para iPhone y iPad), Microsoft Edge, distintas versiones de Internet Explorer y Firefox y Chrome para Windows y Mac.
Además, desde Otros… puedes cambiar el User Agent. Puedes ayudarte con User-Agent Switcher.
Internet Explorer
En Internet Explorer, tendrás que ir a Herramientas > Herramientas para desarrolladores (F12). Se abrirá un panel en la parte inferior del navegador.
En ese panel, hay que pulsar en Emulación y verás que puedes elegir entre varias opciones para simular un tipo de dispositivo, plataforma o navegadores diferentes al propio Internet Explorer.
Microsoft Edge también ofrece el mismo panel desde el mismo menú, pero además muestra perfiles predefinidos para diferentes dispositivos, como Lumia, Surface, iPhone, iPad o Nexus.
Opera
Las últimas versiones de Opera están basadas en Google Chrome, por lo que las instrucciones para cambiar el User Agent en Chrome valen tal cual para Opera.
En resumen, tienes que ir al menú de la esquina superior derecha, Más herramientas > Herramientas para desarrolladores y en el panel que aparecerá pulsar en el icono que muestra un teléfono y una tablet.
Los demás aspectos de Opera son idénticos a Chrome, tanto para cambiar de dispositivo como para crear un perfil propio.