Metodos De Redistribucion Para Sitios Moviles

Métodos de Redirecionamiento para sitios móviles

Cuándo un usuario accede a nuestro sitio web desde un dispositivo móvil (Smartphone o Tablet), es una buena práctica redirigirlo a un archivo de nuestro sitio adaptado para este tipo de dispositivos a fin de adaptarnos a sus características específicas con la consecuentes mejoras de navegación y experiencia del usuario. La detección del tipo de dispositivo que está utilizando nuestro visitante puede realizarse en el servidor mediante PHP, pero también del lado del cliente mediante JavaScript.

Es bueno recordar que JavaScript puede deshabilitarse en todos los navegadores por acción del usuario, por lo que quizás el mejor método sería redirigirlo mediante PHP, de lo que hablaremos en un próximo post. Existen dos métodos para realizar esta detección y el redireccionamiento. La primera es creando nuestro propio “script” y la segunda utilizando un “script externo” como el de “Detect Mobile Browsers”. [1]

1. Script Personal

Lo primero que debemos hacer es acceder a la información del Agente de Usuario (User Agent), que en JavaScript se realiza a través de “navigator.userAgent”. Creamos una variable llamada “dispositivo”, que nos almacena del objeto “Navigator” la propiedad “userAgent”, y nos devuelve una información completa sobre el agente de usuario representado por el navegador, mediante el método “toLowerCase()”, transforma esta información en minúsculas para que no existan errores de escritura. [2]

El condicional “if” busca la cadena iphone o iPod o iPad o Android, (en este ejemplo, aunque podemos colocar más agentes de usuario), a través del objeto “location”, lo redirigimos al archivo de nuestro sitio donde se encuentran las páginas diseñadas para este tipo de dispositivos.

2. Mediante Scripts Externos

Si no tienes ganas de complicarte la vida y quieres tener todo tipo de dispositivos válidos, lo mejor que puedes hacer, es ir a la página web de “Detect Mobile Browsers”, allí encontrarás varios scripts realizados para distintos lenguajes (JavaScript, PHP, ASP, Phyton, etc.), pinchas en la pestaña del lenguaje que prefieras, descargas el archivo (en este caso en Javascript) y al final te encontrarás una cadena tipo ‘http://detectmobilebrowser.com/mobile’, cambia esta URL por la tuya, guarda el script en la carpeta donde tienes tus archivos Javascript en tu servidor, y entre las etiquetas “head” de tu “index.html” coloca un código de enlace parecido a éste, sólo lo tienes que cambiar por el nombre que le hayas dado a tu archivo “js”.

...