DETECTAR MÓVIL O TABLET Y REDIRIGIR A OTRA PÁGINA WEB

En ocasiones, puede que nos interese redirigir a otra página, a aquellos usuarios que acceden a nuestra web vía móvil o tableta. El ejemplo más clásico, consiste en diseñar una arquitectura HTML (o CSS) específica y diferente para sendos dispositivos, con el objeto de facilitar la adaptación y visibilidad de la misma a las diferentes resoluciones.

Cabe decir, en este contexto, que ésta es una práctica poco recomendable, pues no olvidemos que estaremos duplicando código HTML, de modo que en caso de hacer modificaciones a nuestra web, tendremos que hacer los pertinentes cambios tantas veces como archivos hayamos creado. Por otra parte, estaremos alejando nuestro “buen hacer” de lo que se espera que hagamos como desarrolladores web, es decir, cargar la parte estética a través de CSS.

Entonces, qué es lo más recomendable? Sin lugar a dudas, el uso de las media queries para la adaptación responsiva de nuestras webs.

Dicho esto, y a pesar de los pesares, voy a describir a continuación mediante código jQuery, cómo podemos hacer para detectar si nuestro visitante lo hace a través de un móvil o una tableta y, en tal caso, redirigirlo a otra parte de nuestra web:

<script type="text/javascript">
            var dispositivo = navigator.userAgent.toLowerCase();
            if( dispositivo.search(/iphone|ipod|ipad|Opera Mini|IEMobile|BlackBerry|android/) > -1 ){
            document.location = "http://www.pagina_a_la_que_quieres_redirigir.html";
            }; 
</script>

Basta con que introduzcas este código antes de la etiqueta “</head>”.

Aunque menos efectiva, otra técnica consiste en detectar la resolución de la pantalla desde la que se está visualizando la web. En tal caso, podríamos emplear este otro código jQuery:

<script type="text/javascript">
            if(screen.width < 1024){
            window.location="http://www.pagina_a_la_que_quieres_redirigir.html";
            }; 
</script>

En este caso, se redirigirá a aquellos visitantes cuya resolución sea inferior a 1024 píxeles.

Y ya por terminar, otra forma diferente consistiría en aplicar una hoja de estilos CSS propia, a aquellas resoluciones que definamos. Pongamos un ejemplo:

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 320px)" href="estilos/estilo_mov.css" />

En este caso, estaremos aplicando los estilos contenidos en el archivo “estilo_mov.css”, a aquellas resoluciones inferiores a 320 píxeles.

Sin más por el momento, no dudes en dejar un comentario, ya sea respondiendo a este mensaje o a través de mi web www.creadiweb.com

Manuel Córdoba