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

 

Cómo asignar a un DIV la misma altura de nuestra pantalla

Uno de los principios básicos que todo diseñador de webs debe de recordar es que, todo lo relacionado con la parte estética del contenido, se realice vía CSS. Sin embargo, en ocasiones, bien sea porque nos veamos limitados en conocimientos, bien sea porque así lo elegimos, puede que queramos recurrir a otros sistemas.

Así pues, en este artículo voy a explicar cómo asignar a un DIV (o Id), la misma altura que la de la ventana de nuestro navegador, usando para ello jQuery. Además, veremos cómo centrar verticalmente dicho DIV dentro de nuestra pantalla.

Estructura HTML:

Imaginad que tenemos un Id que hace las veces de “contenedor padre”. A este Id lo llamaremos “contenedor”. Dentro de este Id, introduciremos dos DIV’s. Uno que lo bautizaremos con la class=”flotante” y que no tendrá contenido alguno (como se intuye), y otro que alojará todo el contenido que queramos introducir. A éste último le asignaremos la clase=”midiv”.

Podríamos representarlo del siguiente modo:

<section class="contenedor">

<div class="flotante"></div>

<div class="midiv">

<p>Aquí introducimos el contenido</p>

</div>

</section>

El código jQuery:

El siguiente código, lo introduciremos en un “archivo satélite” que recogerá todas funciones jQuery. También podríamos introducirlo en el mismo archivo HTML, antes de la etiqueta </head>. En este caso, deberemos encerrarlo entre las etiquetas: <script type=”text/JavaScript”> y </script>.

$(window).load(function(){ //también podríamos usar $(document).ready(function(), aunque esto me ha dado problemas con el google chrome.
alturaventana = $(window).height(); //Calcula la altura de la pantalla, y la asigna a la variable alturaventana
alturamidiv = $(".midiv").height(); //Idem pero del div de clase "midiv
if (alturaventana>alturamidiv) { //es decir, si la altura de la pantalla es mayor a la del propio div
t = (alturaventana-alturamidiv)/2; //calcula el hueco que queda al restar del alto de la pantalla el div, y lo reparte entre dos. Este valor lo asigna a la variable "t".
$("#contenedor").css("height", alturaventana); // El contenedor ocupará la altura de la pantalla. Importante declarar el id con position: relativa en nuestro CSS.
$(".flotante").css("height",t); //aplica a la propiedad altura del div "flotante", el valor de la variable "t". El objetivo de este div, consiste en rellenar un hueco entre el contenedor padre y el div que aloja al contenido.
}else{ //es decir, si la altura del DIV es mayor a la de la ventana de nuestro navegador.
t = alturamidiv;
$("#contenedor").css("height", t); //Es decir, que la altura del contenedor padre, será la que ocupe el DIV que aloja el contenido por necesidad.
$(".flotante").css("height",70); //Le damos una altura en píxeles para forzar un distanciamiento (hueco) al título o primera línea del DIV.
}; });

Conclusión:

Puede que no sea una forma muy elegante de llevar a cabo nuestra propuesta. No obstante, podrás comprobar la funcionalidad de la misma en mi web: www.creadiweb.com

No olvides dejar algún comentario si te ha gustado este artículo.

Saludos,

 

Manuel Córdoba