Cómo redirigir dispositivos a la versión móvil de tu web

Hace poco tiempo nos surgió por primera vez la necesidad de poner en marcha la versión optimizada para móviles de uno de nuestros proyectos personales.

A la hora de empezar a manejar dos versiones diferentes de un mismo portal, una para la versión web normal y otra para móviles recopilamos información y ejemplos en Internet y optamos por seguir las siguientes recomendaciones:

• Mantener el dominio principal (versión web) con la URL: www.misitioweb.com
• Crear el nuevo dominio vinculado al anterior para dispositivos móviles: m.misitioweb.com
• Replicar todo el árbol de URLs de la web original también para la versión móvil; es decir, que para cada página dentro de www.misitioweb.com/xxx/yyy.html existiese el equivalente m.misitioweb.com/xxx/yyy.html de forma que siempre sea posible para el usuario cambiar de una versión a la otra según sus necesidades; en este caso nosotros optamos por incluir un enlace en el pie de cada página (tanto web como móvil) para ir a la otra versión.
• Diseñar las páginas para móviles pensando en que la carga ha de ser rápida, las páginas ligeras, de lectura clara... aunque existen muchos tipos de dispositivos, resoluciones de pantalla, formatos verticales y horizontales, nuestra recomendación es que las páginas estén pensadas para encajar en un ancho de pantalla de 320 pixels.
• Introducir las reglas de redirección 302 desde la versión web a la móvil cuando se detecte un dispositivo móvil.

Aunque las comprobaciones y redirecciones pueden hacerse también desde cada página PHP, buscando en Internet recopilamos un amplio conjunto de reglas para hacer este trabajo desde Apache, configurando el fichero .htaccess del servidor www.misitioweb.com de la siguiente manera:

RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC,OR]

RewriteCond %{HTTP_USER_AGENT} (iphone|ipod|android|blackberry|opera\ mini|windows\ ce|nokia|symbian|palm|hiptop|avantgo|plucker|xiino|blazer|iris|3g_t|elaine|mobile\ safari) [NC]

RewriteCond %{HTTP_USER_AGENT} !^.*ipad.*$ [NC]

RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

RewriteRule ^(.*)$ http://m.misitioweb.com/$1 [L,R=302]

En este caso se incluyen móviles de distintos fabricantes, PDAs, también eBooks, pero se excluye el iPad como dispositivo móvil ya que su tamaño, resolución y pantalla permite navegar por la web como si de un PC o portátil se tratase, por lo que no es necesaria la redirección.

El siguiente paso es resolver el escenario en el que un usuario que está viendo la versión móvil de nuestro sitio quiere forzar la carga de la versión web; con el código anterior, cuando el usuario intente abrir la versión web será automáticamente redirigido de nuevo a la versión móvil; lo que se puede hacer entonces es añadir algunas líneas más de código encima de todo el fragmento anterior:

RewriteCond %{HTTP_REFERER} ^http://m\.misitioweb\.com/ [NC]

RewriteCond %{HTTP_COOKIE} !^.*forzarweb.*$ [NC]

RewriteCond %{REQUEST_URI} !^.*redireccion-web.*$ [NC]

RewriteRule ^(.*)$ http://www.misitioweb.com/redireccion-movil.php?url=%{REQUEST_URI} [R,L]

El fichero "redireccion-movil.php" crea una cookie (con un tiempo de vida, a gusto de cada uno, de por ejemplo 10 minutos, media hora, una hora...) llamada "forzarweb"  y valor "true" y, a continuación, redirige la petición a la URL solicitada por el usuario y recibida como parámetro en la variable "url".

Por último, volviendo al primer bloque de código, y justo entre la penúltima y última línea, añadimos lo siguiente:

RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

RewriteCond %{HTTP_COOKIE} !^.*forzarweb.*$ [NC]

RewriteCond %{REQUEST_URI} !^.*redireccion-web.*$ [NC]

RewriteRule ^(.*)$ http://m.misitioweb.com/$1 [L,R=302]

De esta forma, cuando se haya creado la cookie, se ignorará la redirección a la versión móvil y el usuario podrá navegar por la versión web tal y como había pedido.

Existe una solución utilizando únicamente Apache para crear también la cookie; sin embargo, nuestro servidor de hosting es compartido y su versión de Apache tiene algunas características restringidas, como por ejemplo la creación de cookies, por este motivo tuvimos que implementar esta versión intermedia delegando parte del trabajo en un script PHP. En cualquier caso, como decimos, es posible hacer este trabajo directamente desde las reglas de .htaccess siempre que el servidor lo permita, siguiendo para ello las indicaciones de la propia documentación de Apache al respecto con el modificador:

[CO=NAME:VALUE:DOMAIN:lifetime:path:secure:httponly]

Por ejemplo:

RewriteRule ^/index\.html - [CO=forzarweb:true:.misitioweb.com:60:/]

Que crea la cookie "forzarweb" con valor "true" y tiempo de vida de 60 minutos para todos los subdirectorios y ficheros de los dominios y subdominios de misitioweb.com