Détection / redirection pour mobiles

MobileDetect, c'est quoi?

MobileDetect c'est un script gratuit en PHP à placer sur vos pages mobiles qui vous permet de récupérer les caractéristiques (taille d'écran, type de navigateur, support java,...) des mobiles visitant vos pages. Avec ces caractéristiques, vous pouvez ensuite adapter vos pages mobiles afin de vous assurer qu'elles utilisent au mieux les capacités du mobile.

MobileDetect, pourquoi?

La plupart des mobiles sont encore aujourd'hui incapables de lire des pages internet complètes, les écrans ne permettent pas non plus d'afficher beaucoup d'information et les connexions sont bien souvent trop lentes pour télécharger de grosses quantités de données. Pour encore compliquer la tache, les constructeurs ne se sont pas entendus sur un standard à suivre et la plupart des mobiles se comportent de façon différente lorsqu'il faut lire une page internet mobile. Il existe des centaines de résolutions différentes, des dizaines de familles de navigateurs/browsers avec autant de façons de supporter l'affichage d'une page. Créer des pages mobiles qui fonctionnent sur tous les mobiles demandera donc l'utilisation d'un système de détection mobile qui fournira toutes les données nécessaires à la création dynamique des pages mobiles. Si un téléphone dispose d'un écran de 128x160 pixels et un navigateur basique, il est inutile de lui adresser des pages trop complexes qui ne s'afficheront pas correctement.

Comment ça marche?

MobileDetect fonctionne de façon assez simple, vous n'avez pas besoin d'être un gourou en développement, quelques connaissances de base suffisent. MobileDetect est une API vers laquelle il faut renvoyer un certain nombre de données par une requête POST afin de recevoir les caractéristiques du téléphone en retour. Vous recevrez en retour une ligne de texte contenant toutes les données nécessaires.

Voici en résumé ce que vous devez faire pour utiliser l'API
- vous inscrire à MobileMultimedia pour obtenir un identifiant et un mot de passe (c'est gratuit)
- récupérer les HTTP headers suivants: HTTP_USER_AGENT, HTTP_X_WAP_PROFILE and HTTP_ACCEPT (attention ces headers doivent être ceux du téléphone!)
- construire une requête de type POST vers l'URL suivante: ttp://www.mobilemultimedia.be/api/mobiledetect.php
- envoyer les variables suivantes avec leur contenu: uag (HTTP_USER_AGENT), uap (HTTP_X_WAP_PROFILE), acc (HTTP_ACCEPT), login, password, email
- traiter les données reçues en retour

Il existe plusieurs méthodes pour effectuer une connexion vers MobileDetect et vous n'êtes pas non plus obligé d'utiliser le PHP. L'exemple suivant est en PHP, vous pouvez librement vous en inspirer ou le recopier tel quel.

// ---------------------------------------
// URL de l'API
// ---------------------------------------
$url="http://www.mobilemultimedia.be/api/mobiledetect.php";

// ---------------------------------------
// Récupération des données nécessaires
// ---------------------------------------
$user_agent=$_SERVER['HTTP_USER_AGENT'];
$uaprof=$_SERVER['HTTP_X_WAP_PROFILE'];
$accept=$_SERVER['HTTP_ACCEPT'];

// ---------------------------------------
// Information du membre
// remplissez vos identifiants, mot de passe et e-mail
// ---------------------------------------
$login="Votre identifiant" ;
$password="Votre mot de passe ";
$email="Votre adresse e-mail ";

// ---------------------------------------
// Création de la requête POST ave cURL
// Assurez-vous que votre hébergeur supporte cURL
// ---------------------------------------
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_POST, 1);
// Les différents paramètres doivent être séparés par un &
curl_setopt($ch, CURLOPT_POSTFIELDS,"login=$login&password=$password&uag=$user_agent&uap=$uaprof&acc=$accept&email=$email");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// ob_start & ob_end vous permettent d'éviter d'afficher la réponse de
// l'API à l'écran
ob_start();
$result= curl_exec ($ch);
// toutes les données sont disponibles dans la variable $content
$content = curl_multi_getcontent ($ch);
ob_end_clean();
curl_close ($ch);

A ce stade, il ne vous reste plus qu'à traiter le contenu de la variable $content pour en retirer les informations dont vous avez besoin. Jettez un oeil à droite pour plus d'explications sur le contenu de cette variable.

Exemple de retour

Lorsque vous recevrez une réponse de l'API, vous allez recevoir une chaine de texte pour laquelle tous les éléments sont séparés par un double #.

Exemple:
brand::Samsung##model::Z630##browser::NetFront##browserversion::3.3## resolution::240x320##xhtmlversion::1.0##htmlversion::4.0##wapversion::2.0 ##javaplatform::CLDC1.1##accept_types::text/vnd.wap.wml,text/xml, application/vnd.wap.wmlc,application/vnd.wap. wbxml,application/vnd.wap. wmlscriptc,application/vnd.wap.xhtml+xml,text/html,text/plain,text/css, application/wml+xml,application/xhtml+ xml,multipart/mixed,application/vnd. wap.multipart.mixed,image/vnd.wap.wbmp,image/gif,image/jpeg,image/png, image/bmp,image/jpg, audio/midi,audio/mid,audio/x-midi,audio/sp-midi,audio/ mmf,audio/x-iMelody,audio/iMelody,audio/amr,audio/x-amr,application/vnd.smaf, application/x-smaf,text/x-iMelody,audio/mpeg4,audio/mp4,audio/3gpp,audio/wav ,audio/x-wav,video/h263,video/mpeg,video/x-vp-mp4, video/3gpp,video/3gp, video/mpeg4,video/mp4,video/x-mp4,application/sdp,application/vnd.oma.dd+xml, text/vnd.sun.j2me.app-descriptor,application/vnd.oma.drm.message,application/ vnd.oma.drm.content,application/vnd.oma.drm.rights+xml,application/vnd.oma.drm. rights+ wbxml,text/vnd.wap.connectivity-xml,application/vnd.wap.connectivity-wbxml## login::Login and Password ok##UAprof::UAprof found, downloading data##status::Detection done##

Chaque élément séparé avec ## contient à chaque fois un label ainsi qu'une valeur pour vous aider à identifier à quoi correspond une valeur.

Exemple:
resolution::240x320
veut dire que la résolution de l'écran est de 240x320

Pour pouvoir utiliser ces données, il vous suffit de scinder une première fois la chaine sur base des ## et ensuite scinder la chaine une seconde fois sur base des ::.

Voici ce que vous pouvez vous attendre à retrouver dans ces différentes variables:

brand: chaines de caractères contenant toutes les marques disponibles

model: chaines de caractères contenant tous les modèles disponibles

browser: chaines de caractères contenant le nom du browser. Il existe plusieurs centaines de browsers différents

browserversion: suites de chiffres avec quelquefois des points

resolution: largeur suivi d'un x suivi de la hauteur

wapversion: habituellement 1.x et 2.x pour indiquer une différence entre les appareils WML et les autres.

accept_types: tous les accept_types possibles, formats standardisés

En plus de ces variables, vous recevrez des indicateurs pour signaler un problème ou simplement dire que tout va bien comme dans l'exemple donné.

Que devez-vous absolument utiliser pour votre détection?
Il y a deux choses très importantes dans la détection, il y a la taille de l'écran (variable resolution) et le type de navigateur (variable wapversion). Vous pouvez déjà ainsi créer des groupes comme:

Vieux appareils WML: wapversion = 1.x et largeur d'écran < 128 pixels

Entrée de gamme xHTML: wapversion = 2.x et largeur d'écran < 128 pixels

Milieu de gamme xHTML: wapversion = 2.x et largeur d'écran entre 150 et 240 pixels

Haut de gamme xHTML: wapversion = 2.x et largeur d'écran > 240 pixels

Tout dépend de vos objectifs, cette première catégorisation fonctionnera dans la plupart des cas mais vous pouvez aller plus loin en utilisant la marque et la version du navigateur pour adapter vos pages à chaque navigateur. C'est beaucoup plus fastidieux mais le niveau d'adaptation sera bien meilleur.

Derniers visiteurs sur MobileDetect

2010-02-09 - 03:54:57:
BlackBerry8800/4.2.1 Profile/MIDP-2.0 Co...
2010-02-09 - 03:26:16:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 03:24:22:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 03:22:51:
LG-KE970 MIC/1.1.14 MIDP-2.0/CLDC-1.1...
2010-02-09 - 02:27:16:
Nokia1680c-2/2.0 (05.61) Profile/MIDP-2....
2010-02-09 - 02:16:19:
SonyEricssonW910i/R1EC Browser/NetFront/...
2010-02-09 - 02:14:24:
SonyEricssonW910i/R1EC Browser/NetFront/...
2010-02-09 - 01:34:41:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:22:26:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:22:01:
BlackBerry9000/4.6.0.297 Profile/MIDP-2....
2010-02-09 - 01:03:11:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:44:57:
Nokia6230i/2.0 (03.88) Profile/MIDP-2.0 ...
2010-02-09 - 00:44:54:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:44:49:
Nokia3120classic/2.0 (07.16) Profile/MID...
2010-02-09 - 00:41:42:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:41:30:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:41:14:
SAMSUNG-SGH-J700i/J700IXAIE1 Profile/MID...
2010-02-09 - 00:40:53:
SAMSUNG-SGH-G600/G600XAHJ1 NetFront/3.4 ...
2010-02-09 - 00:40:32:
SonyEricssonK530i/R6BC Browser/NetFront/...
2010-02-09 - 00:28:13:
SAMSUNG-SGH-G600/G600XAHJ1 NetFront/3.4 ...

MobileDetect Toolkit

Le MobileDetect Toolkit est un fichier zip contenant des scripts PHP prêt à l'usage, il vous suffira ensuite de remplir vos identifiants et recopier le code dans vos pages.
Le toolkit propose les élements suivants:

- des modèles de pages en WML et xHTML
- un script de détection mobile basé sur MobileDetect
- un script de redimensionnement d'image
- des suggestions
- du code documenté

Telecharger le MobileDetect WAP toolkit

Un coup de main?

Consultez la page d'aide pour développer un site mobile, vous y trouverez quelques liens intéressants pour vous aider dans votre démarche.

Pour tout question relative à MobileDetect, utilisez le formulaire de contact dans la rubrique contact.

Détection / Redirection mobile