Blog Skins Tutoriales Glosario Ayuda

Detectar dispositivos móviles con PHP

El primer paso para hacer amigable nuestro sitio con dispositivos móviles es reconocerlos. Reconociendo el navegador de un dispositivo móvil podemos ofrecerle al visitante un sitio web apto para su navegador.

En este tutorial aprenderemos como reconocer los dispositivos moviles por medio de PHP. Para lograrlo debemos obtener el user-agent del navegador, el user-agent es la identificación que el navegador nos proporciona en donde indica su versión, sistema operativo, tipo de dispositivo, etc. Para obtener el user-agent debemos llamar a la variable $_SERVER['HTTP_USER_AGENT'].

Para empezar debemos hacer un listado de navegadores móviles junto con su respectivo user-agent, lo haremos en el array $dm_usergent. Lo más recomendable es colocar primero los user-agent que son más específicos para que la detección sea igual de especifica (si así lo deseamos).

$dm_usergent = array(
'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
'Minimo' => 'Minimo',
'OperaMini' => 'Opera Mini',
'AvantGo' => 'AvantGo',
'Plucker' => 'Plucker',
'NetFront' => 'NetFront',
'SonyEricsson' => 'SonyEricsson',
'Nokia' => 'Nokia',
'Motorola' => 'mot-',
'BlackBerry' => 'BlackBerry',
'Skweezer'=>'.NET CLR 1.1.4322',
'GoogleMobilizer'=>'Google Wireless Transcoder',
'WindowsMobile' => 'Windows CE',
'PPC' => 'PPC',
'PDA' => 'PDA',
'Smartphone' => 'Smartphone',
'Palm' => 'Palm'
);

Una vez definidos los navegadores pasamos a crear la función que detectara el navegador, la función requiere dos parametros: el primero el listado de navegadores, en este caso $dm_usergent y el segundo parámetro es el user-agent que queremos comprobar.

function obtenerNavegador($useragents, $useragent){
foreach($useragents as $nav=>$ua){
if(strstr($useragent, $ua)!=false){
return $nav;
}
}
return 'Desconocido';
}

Como pueden observar la función comprueba uno a uno los navegadores y cuando encuentra una coincidencia devuelve el nombre del navegador, por eso es importante colocar los user-agent más específicos al principio para que no sean ignorados.

Llamamos a la función enviandole el listado y el user-agent por medio de la variable $_SERVER['HTTP_USER_AGENT']

$navegador=obtenerNavegador($dm_usergent,$_SERVER['HTTP_USER_AGENT']);

Por último solo debemos redireccionar el sitio web con una condición sencilla: si el navegador se encuentra en la lista es un dispositivo móvil y lo redireccionamos a la página dm.html con la funcion header() y si por el contrario no lo es, lo redirigimos a la página pc.html.

if($navegador!='Desconocido'){
header('Location: dm.html');
}else{
header('Location: pc.html');
}

El código final debe quedar así:

<?php
//webdebolsillo (http://webdebolsillo.com)
//Software, tutoriales, webs y skins para tu pocket pc
//
//Como detectar dispósitivos móviles con PHP
//
//user-agent(UA) de dispositivos móviles
//Notese que en muchos casos no es necesario ingresar toda la cadena
//de UA. También es importante dejar los UA genericos, como WindowsMobile,
//al final para evitar que interfieran con los especificos.
$dm_usergent = array(
'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
'Minimo' => 'Minimo',
'OperaMini' => 'Opera Mini',
'AvantGo' => 'AvantGo',
'Plucker' => 'Plucker',
'NetFront' => 'NetFront',
'SonyEricsson' => 'SonyEricsson',
'Nokia' => 'Nokia',
'Motorola' => 'mot-',
'BlackBerry' => 'BlackBerry',
'Skweezer'=>'.NET CLR 1.1.4322',
'GoogleMobilizer'=>'Google Wireless Transcoder',
'WindowsMobile' => 'Windows CE',
'PPC' => 'PPC',
'PDA' => 'PDA',
'Smartphone' => 'Smartphone',
'Palm' => 'Palm'
);
</p>

&lt>function obtenerNavegador($useragents, $useragent){
foreach($useragents as $nav=>$ua){
if(strstr($useragent, $ua)!=false){
return $nav;
}
}
return 'Desconocido';
}
</p>

&lt>$navegador=obtenerNavegador($dm_usergent,$_SERVER['HTTP_USER_AGENT']);
if($navegador!='Desconocido'){
header('Location: dm.html');
}else{
header('Location: pc.html');
}
?>

Ejemplo

Probar ejemplo desde tu navegador
Emulador de Opera Mini: Ver con Opera Mini.
Ver ejemplo con Google Mobilizer.
Ver ejemplo con Skweezer.

Si deseas también puedes descargar el ejemplo en formato zip.

Más información

Para encontrar más user-agent puedes visitar este articulo de zytrax, que contiene una recopilación muy completa de user-agent.
Articulo sobre mobileOK, el estándar de la W3C para la web móvil.
User-agent Switcher: la extensión para cambiar el user-agent con que se identifica Firefox. Muy útil para pruebas.

Ayuda

¿Tienes dudas o comentarios? Puedes enviarmelos por la Ayuda en línea o el formulario de contacto

Ayuda

Amigos

Miembro de

El contenido del blog se encuentra bajo licencia
.
El diseño gráfico y otros elementos del sitio web
tienen derechos reservados, excepto que se indique lo contrario.
®2006-2007 webdebolsillo