detecta móviles

6
Las diferencias de resolución y tamaño de pantalla entre los diferentes dispositivos móviles, como smart phones y tablets, y las pantallas de los ordenadores son uno de los principales motivos que hacen que la experiencia de un usuario pueda no ser muy grata del dispositivo que utilice para conectarse a internet. Puede haber otros motivos que nos hagan requerir mostrar diferentes características a los usuarios según el dispositivo que estén utilizando para acceder a nuestra web. Y eso es lo que vamos a aprender hoy. Vamos a ver como detectar los diferentes dispositivos móviles utilizando PHP. Para explicar el proceso he divido el artículo en dos partes: 1. Uso de la variable $_SERVER['HTTP_USER_AGENT'] para detectar dispositivos móviles . Explicamos como podemos detectar cualquier tipo de dispositivo construyendo nuestro propio código. 2. Clase PHP-mobile-detect . Este proyecto open source nos ahorrará mucho trabajo y está listo para usar. o Ejemplo: Redirección si el usuario utiliza un móvil o tablet Uso de la variable $_SERVER['HTTP_USER_AGENT'] para detectar los diferentes dispositivos La variable $_SERVER es una variable supergoblal (siempre disponible en cualquier parte de un script PHP) en forma de array y contiene diversa información del entorno del servidor y de ejecución. Entre la información disponible en esta variable está la relativa al agente de usuario utilizado para acceder a la página. Para obtener esta información se utiliza $_SERVER['HTTP_USER_AGENT'] cuyo valor es el string contenido en la cabecera User-Agent de la solicitud HTTP recibida en el servidor. Por ejemplo, esta variable me devuelve la siguiente cadena si accedo con Firefox desde el PC que estoy utilizando en estos momentos: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0

Transcript of detecta móviles

Page 1: detecta móviles

Las diferencias de resolución y tamaño de pantalla entre los diferentes dispositivos móviles,

como smart phones y tablets, y las pantallas de los ordenadores son uno de los principales

motivos que hacen que la experiencia de un usuario pueda no ser muy grata del dispositivo

que utilice para conectarse a internet. Puede haber otros motivos que nos hagan requerir

mostrar diferentes características a los usuarios según el dispositivo que estén utilizando para

acceder a nuestra web.

Y eso es lo que vamos a aprender hoy. Vamos a ver como detectar los diferentes dispositivos

móviles utilizando PHP. Para explicar el proceso he divido el artículo en dos partes:

1. Uso de la variable $_SERVER['HTTP_USER_AGENT'] para detectar dispositivos móviles . Explicamos como podemos detectar cualquier tipo de dispositivo construyendo nuestro propio código.

2. Clase PHP-mobile-detect . Este proyecto open source nos ahorrará mucho trabajo y está listo para usar.

o Ejemplo: Redirección si el usuario utiliza un móvil o tablet

Uso de la variable $_SERVER['HTTP_USER_AGENT'] para detectar los diferentes dispositivosLa variable $_SERVER es una variable supergoblal (siempre disponible en cualquier parte de

un script PHP) en forma de array y contiene diversa información del entorno del servidor y de

ejecución. Entre la información disponible en esta variable está la relativa al agente de usuario

utilizado para acceder a la página. Para obtener esta información se utiliza

$_SERVER['HTTP_USER_AGENT'] cuyo valor es el string contenido en la cabecera User-

Agent de la solicitud HTTP recibida en el servidor.

Por ejemplo, esta variable me devuelve la siguiente cadena si accedo con Firefox desde el PC

que estoy utilizando en estos momentos:

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0

Como ves, contiene la información del navegador, del sistema operativo y algunos datos más.

Podríamos utilizar la función PHP get_browser() pero la variable $_SERVER está siempre

disponible sin que necesitemos llamar a ninguna otra función, al menos para nuestro propósito

de detectar dispositivos móviles es más que suficiente y la función get_browser() se puede

reservar para casos en los que necesitemos conocer características específicas del

navegador (por ejemplo si acepta cookies o no, si tiene activado javascript, etc).

Page 2: detecta móviles

Una vez que tenemos la cadena del User-Agent podemos, por ejemplo, hacer un preg_match

para detectar el dispositivo que nos interese. Por ejemplo, con el siguiente código

podríamos saber si el usuario está usando un iPhone o un móvil con Android:

<?php

$useragent = $_SERVER['HTTP_USER_AGENT'];

$dispositivo = "ni iPhone ni android";

if (preg_match("/iPhone/", $useragent)) {

$dispositivo = "iphone";

} elseif (preg_match("/android/", $useragent)) {

$dispositivo = "android";

}

echo $dispositivo;

?>

Cómo ves no es nada difícil. La complicación viene del número de dispositivos móviles

existentes, lo que hace que nuestro código se amplíe cada vez más. Si queremos abarcar

todos los dispositivos deberíamos conocer los User-Agent de cada uno para poder hacer el

correspondiente preg_match. Esta información también está disponible en .htaccess dónde

también podemosdetectar dispositivos móviles con un RewriteCond.

Pero no te preocupes por el problema de la cantidad creciente de dispositivos, alguien ya se

tomó la molestia. La clase PHP-mobile-detect es un proyecto de código abierto mantenido y

distribuido de forma gratuita en GitHub. Veamos un poco como utilizar esta clase.

La clase Mobile-DetectEn GitHub podemos encontrar muchos proyectos interesantes de código abierto en los que

además podemos participar gracias a su funcionamiento estilo "red social". Uno de estos

proyectos es la clase Mobile-Detect en PHP. Su uso es muy sencillo y abarca todos los

dispositivos móviles actuales más importantes a la vez que se actualiza con frecuencia para

cubrir los nuevos que puedan aparecer.

Page 3: detecta móviles

La clase Mobile-Detect es un proyecto de código abierto distribuida de forma gratuita. Si

quieres puedes hacer un pequeño donativo para ayudar a que siga siendo gratuita. En la

página del proyecto en GitHub puedes encontrar el enlace para hacer la donación.

El uso de esta clase es muy sencillo. Basta con descargar el archivo Mobile-Detect.php desde

GitHub. Pon el archivo dónde quieras en tu servidor. Incluye este archivo en tu script php

utilizando require o include según tus necesidades y ya estás listo para detectar cualquier

dispositivo móvil y tabletas:

<?php

//si este script php y Mobile-Detect están en la misma carpeta

//si no, incluye la ruta correcta hacia el archivo

include('Mobile_Detect.php');

$detect = new Mobile_Detect();

if ($detect->isMobile()) {

//cualquier dispositivo móvil

}

if ($detect->isTablet()) {

//cualquier dispositivo tipo tableta

}

?>

Con los métodos anteriores puedes detectar cualquier dispositivo móvil o tablet. Si necesitas

además detectar de forma específica la plataforma desde la que está accediendo el usuario a

tu web puedes utilizar los siguientes métodos:

if($detect->isiOS()){

//Estamos en un dispositivo con iOS de Apple como iPhone, iPod, ...

}

if($detect->isAndroidOS()){

//Estamos en un dispositivo con Android de Google

}

Page 4: detecta móviles

También podemos detectar de forma específica cada tipo de dispositivo. Para ver la lista

completa soportada mira el archivo demo.php incluido en el paquete que has descargado

desde GitHub. Por ejemplo:

$detect->isIphone();

$detect->isIpad();

$detect->isBlackBerry();

$detect->isKindle();

$detect->isOpera();

Otro método interesante es el método is(). Con él ponemos hacer lo mismo que con las

funciones anteriores pero con la flexibilidad de poner el nombre que tu quieras, incluso si no

está incluido en la clase de form nativa (este método no es sensible a mayúsculas y

minúsculas, puedes poner iPhone, iphone o Iphone que tiene el mismo resultado). Por

ejemplo:

//equivalente a $detect->isIphone()

$detect->is('Iphone');

//equivalente a $detect->isChrome()

$detect->is('Chrome');

//podemos detectar dispositivos aún no incluidos de forma nativa en la clase

$detect->is('miDispositivo');

Y no se queda aquí. La flexibilidad es tal que incluso podemos definir nuestra propia lista de

User-Agent y forzar a la clase a utilizar esta lista. Ejemplo:

$userAgents = array(

'Mozilla/5.0 (Linux; Android 4.0.4; Desire HD Build/IMM76D) AppleWebKit/535.19

(KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19',

'BlackBerry7100i/4.1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/103',

[...]

);

foreach($userAgents as $userAgent){

$detect->setUserAgent($userAgent);

$isMobile = $detect->isMobile();

$isTablet = $detect->isTablet();

Page 5: detecta móviles

//Resto de tu código

}

¿Quieres más opciones? También puedes obtener la versión de la plataforma o navegador:

$detect->version('iPad');

$detect->version('iPhone');

$detect->version('Android');

Ejemplo práctico: redireccionar si nos visitan

desde un móvilUn ejemplo bastante clásico sería la redirección de los usuarios si nos visitan desde un móvil

o un tablet. Esto se podría hacer con la clase Mobile-Detect tal y como se explicó anteriormente más la función  header . Por ejemplo:

<?php

include('Mobile_Detect.php');

$detect = new Mobile_Detect();

//redirigir el trafico a la version movil si nos visitan

//desde un movil o un tablet

if ($detect->isMobile() || $detect->isTablet()) {

header("Location: http://movil.ejemplo.com");

}

?>

Aprende más: