Técnicas para detectar dispositivos móviles y/o con retina para redirigir el contenido web

Os voy a mostrar unas cuantas maneras de poder detectar los dispositivos móviles a través del navegador (User Agent) que esté usando el usuario. Los ejemplos son para el lado servidor, cliente, con CSS y Wordpress, tanto en forma de plugin como en código.

PHP User Agent

Cuando el navegador le pide al servidor una página a su vez también envía cierta información acerca del "User Agent". Lo que podríamos hacer sería comparar este con un listado de "User Agents" sobre dispositivos móviles y redirigir al usuario en función de su versión.

El código en sí es bastante simple, haremos uso de la función preg_match() para comparar el navegador del usuario con una array que contenga navegadores móviles.

<?php  
 // Creamos array de móviles  
 $mobiles = array("iPhone","iPod");  
  
 foreach( $mobiles as $mobiles ) {  
   if( preg_match('#'.$mobile.'#i',$_SERVER['HTTP_USER_AGENT'])){  
// Si da 'true' redigirimos el contenido  
  
     header('Location:http://mobile.mi_sitio.com/');  
        exit();  
   }  
  }  
?>

Este código es muy manejable ya que podríamos deshabilitar este testeo via cookie por si alguno de nuestros visitantes desease ver la versión de escritorio de nuestra web a través de un link que coloquemos en el 'footer'. El truco sería establecer el link de 'yoursite?nomobile=1' para testear la variable antes de la redirección, el código quedaría de esta manera:

<?php  
    // Comprobamos si hay 'get', 'post' o 'cookie' para nomobile  
    if ( isset(  $_REQUEST['nomobile']) && true ==  $_REQUEST['nomobile']) {  
    // Comprobamos si tenemos la cookie establecida para no tener que llamar al 'get' en la URL todo el tiempo  
      if(!isset($_COOKIE['nomobile'])){  
        setcookie('nomobile', 1, (time()+60*24*30));  
      }  
    } else {  
    // Comprobamos si el navegador actual es móvil  
     $mobiles = array("iPhone","iPod");  
  
     foreach( $mobiles as $mobiles ) {  
      if( preg_match('#'.$mobile.'#i',$_SERVER['HTTP_USER_AGENT'])){  
    // Si da 'true' redigirimos el contenido  
  
       header('Location:http://mobile.mi_sitio.com/');  
          exit();  
     }  
    }  
   }  
?>

El código PHP lo debemos de colocar al principio de nuestra página para que tenga validez.


JavaScript User Agent

Utilizaremos un código bastante similar al que tenemos en PHP.

Mientras que PHP es más global, la alternativa de JavaScript es más adecuada para sitios donde tengamos poco o ningún control sobre el servidor o por si queremos hacer algo más específico.

Con la opción de JS necesitamos cargar toda la web antes de hacer la redirección, que es exactamente lo contrario a lo que hace la alternativa PHP.

Este sería el ejemplo:

<script type="text/javascript">
  var mobiles = array["iPhone","iPod"];
  // Dispositivos móviles
  for(var i=0;i< mobiles.length;i++){
// Comprobamos que RegExp coincida con los agentes
    var er = new RegExp(mobiles ,"i");
    if(er.test( navigation.userAgent )){
      window.location = "http:⁄/mobile.mi_sitio.com/";
    }
   }
</script>

Código para Wordpress

En Wordpress ya existen unas variables globales que nos ayudan a comprobar si el usuario está con un dispositivo móvil o no y que navegador usa. Después, podemos usar esa info para cargar diferentes scripts, estilos...

Ejemplo:

<?php  
    function carga_estilos_propios(){  
      global $is_iphone// Cargamos la global var  
      if( $is_iphone ){  
        wp_enqueue_style( 'iphone-style', get_stylesheet_directory_uri() .  '/ iphone-style.css');  
      } else {  
        wp_enqueue_style('normal-style', get_stylesheet_directory_uri() . '/style.css');  
      }  
    }  
    add_action( "wp_enqueue_scripts", "carga_estilos_propios");  
?>

Código HTML para Retina

Para detectar a los dispositivos retina de Apple y cargar las imágenes por unas de alta calidad podemos poner estas líneas de código dentro de la etiqueta <head>

<link rel="stylesheet" type="text/css" src="estilo_normal.css"/>  
<link rel="stylesheet" type="text/css" src="retina.css" media="only screen and (-webkit-min-device-pixel-ratio:2)"/>

Otra manera de mostrar contenido en función al dispositivo o anchura de la pantalla sería con las media queries.


Media queries

Las media queries nos ayudan a aplicar estilos de manera condicional si ciertas reglas retornan true Se aplican en función de las reglas especificadas por anchura del navegador, del dispositivo o densidad de píxeles.

/* Smartphones (portrait y landscape) */  
@media only screen and (min-device-width:320px) and (max-device-width:480px){  
     /* Estilos */  
}  
/* Smartphones (landscape) */  
@media only screen and (min-width:321px){  
     /* Estilos */  
}  
/* Smartphones (portrait) */  
@media only screen and (max-width:320px){  
     /* Estilos */  
}  
/* iPads (portrait y landscape) */  
@media only screen and (min-device-width:768px) and (max-device-width:1024px){  
     /* Estilos */  
}  
/* iPads (landscape) */  
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){  
     /* Estilos */  
}  
/* iPads (portrait) */  
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){  
     /* Estilos */  
}  
/* Desktops and Laptops */  
@media only screen and (min-width:1224px){  
     /* Estilos */  
}  
/* Large Screens */  
@media only screen and (min-width:1824px){  
     /* Estilos */  
}  
/* iPhone 4 */  
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5){  
     /* Estilos */  
}

Media queries via JavaScript

Con esta técnica comprobaremos las características del navegador del usuario y de esta manera aplicar un estilo u otro, podemos cambiar clases, imágenes, atributos, redirigir tu página...

Para esto utilizaremos el método window.matchMedia(), al cual le pasaremos como string la regla CSS que queramos que se aplique. Al final tenemos que usar la propiedad var.matches

Explicación sobre matchMedia()

// Versión JS para retina  
var modern_query = window.matchMedia("screen and (-webkit-min-device-pixel-ratio:2)");  
  
if( modern_query.matches ){  
 // Poner aquí lo que deseemos hacer  
 }

Código Htaccess

Esta opción es bastante similar a la del primer ejemplo en PHP.

RewriteCond %{HTTP_USER_AGENT}  
"ipod|iphone|ipad|blackberry"[NC]  
RewriteCond %{HTTP_USER_URI} ^/$  
RewriteRule ^ http://m.mi_sitio.com%  
 {REQUEST_URI} [R,L]

Plugins de Wordpress

Para Wordpress tenemos algunas alternativas en forma de plugin que nos ayudaran a través de una simple interfaz la posibilidad de cambiar archivos css en función del navegador, dispositivo y muchísimas más funciones.

PHP Browser Detection

Mobile Detector

WP Retina 2x


Fuente: DesignM.ag

comments powered by Disqus