Skip to content

7 août 2010 | Rédigé par Sadlig

4

Apprendre à détecter les mobiles [Tutoriel WebApps n°1]

Aujourd’hui nous allons apprendre à détecter les utilisateurs mobiles. Cela va vous permettre de leur servir votre WebApp en lieu et place de votre site classique. Vous allez donc pouvoir les rediriger vers un sous-domaine (http://mobile.votredomaine.com) ou simplement appliquer une feuille de style différente. Voyons donc les différentes manières de procéder.

1. Grâce au fichier .htaccess

Les fichiers htaccess offrent des fonctionnalités très puissantes comme par exemple la redirection conditionnelle. Ceci va nous être utile pour rediriger les mobinautes vers un sous-domaine conçu pour les mobiles. Notre fichier contiendra donc les lignes suivantes :

RewriteEngine On RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "android|palm"
RewriteRule (.*) http://m.votredomaine.com [R=301,L]

Ce code indique au serveur Apache de chercher les mots clés dans le user agent et d’effectuer une redirection si l’un de ses mots est trouvé. En mettant ce fichier .htaccess à la racine de votre site, les visiteurs utilisant un mobile précisé dans ce fichier seront automatiquement redirigé et ce quelque soit le point d’entrée par lequel ils arrivent.

Ce système est très simple à mettre en place est à maintenir, de plus il s’agit d’une méthode de redirection plutôt propre. Il faut néanmoins que votre configuration Apache autorise les htaccess.

2. En PHP

En PHP l’idée est la même, à savoir chercher dans le user agent des indicateur sur le système d’exploitation de l’utilisateur. Nous allons donc écrire une fonction qui renverra true s’il s’agit d’un client mobile et false dans le cas contraire:

function isMobile(){
//User agent
$ua = $_SERVER['HTTP_USER_AGENT'];
//test si il s'agit d'un mobile
return preg_match('/iphone/i',$ua) || preg_match('/android/i',$user_agent)
       ||preg_match('/blackberry/i',$user_agent);
 
}

Cette méthode vous donnera un peu plus de liberté que le htaccess, vous pourrez ainsi effectuer une redirection ou faire appel à une feuille de style adapté au média visé.

Si vous optez pour cette solution, je vous conseille detectmobilebrowsers qui propose une fonction de détection de mobile dont la liste des appareils mobile est assez exhaustive et régulièrement mis à jour.

La fonction est très simple d’utilisation. voici son entête :

function mobile_device_detect($iphone=true,$ipad=true,$android=true,$opera=true,
                              $blackberry=true,$palm=true,$windows=true,
                              $mobileredirect=false,$desktopredirect=false)

Exemple de redirection avec cette fonction:

mobile_device_detect(true,true,true,true,true,true,true,'http://www.m.domaine.fr');

Note : Dans cette partie je serais souvent amené à illustrer un concept par du code PHP, le code pourra la plupart du temps être traduit dans un autre langage exécuté coté serveur.

3. En JavaScript

Toujours sur le même principe, nous allons détecter le user agent. En JavaScript celui-ci est contenu dans l’objet navigator, on effectue une recherche de la même façon qu’en PHP:

if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://mobile.votredomaine.com";
}

Appliquer cette technique est assez simple, le javascript est pris en charge par la plupart des navigateurs mobiles récent de plus les possibilités sont très nombreuses, vous avez la possibilité de faire des redirections, modifier les styles des element ou encore de manipuler le DOM de votre page web, cependant dans le cadre d’une redirection je ne pense que ce soit la solution la plus adaptées car la page se chargera entièrement avant de rediriger l’utilisateur, ce qui n’est pas très performant.

4. En utilisant les media-queries

Les media queries sont assez récentes, elles font parties d’un module CSS3. Elles vont permettre d’appliquer une feuille de style ou une propriété CSS en fonction des caractéristiques matériel du média utilisé. Par exemple on va pouvoir appliquer une feuille de style en fonction de la taille de l’écran.

Exemple d’appel CSS:

<link type="text/css" rel="stylesheet"
      media="only screen and (max-device-width: 480px)" href="mobile.css">

Cette feuille de style sera appliqué à tous les terminaux dont la taille de l’écran sera au maximum de 480px. Il est possible de combiner votre requête avec plusieurs critères, pour en savoir plus je vous invite à aller faire un tour sur le site de Mozilla.

Avec cette solution vous aurez l’assurance de couvrir la quasi totalité du parc mobile car les critères de requête ce font sur des paramètres matériel (taille de l’écran, couleur affichée, écran tactile…). Les media queries me semblent particulièrement adaptés dans le cas où une WebApp diffère de la versions classique uniquement par son style. L’autre gros avantage est la facilité de maintenance.

On en finit donc avec ce premier tuto sur les WebApps. Si vous avez des questions, des remarques, des critiques positives ou négatives n’hésitez pas à les poster en commentaire, je me ferais un plaisir d’y répondre. Et surtout si cela vous a plus n’hésitez pas à faire connaîte Tuto Mobile en partageant ce tuto sur Twitter et/ou FaceBook. Merci à vous ! ;)

Via

Découvrez d'autre articles de la catégorie Tutoriels WebApps

Encore un peu de lecture :

4 Commentaires Poster un commentaire
  1. 29 sept 2010

    Article très utile, merci !

    En revanche, il y a une typo dans la partie php : vous déclarez $ua comme contenant le user agent, puis utilisez $user_agent ;)

    Bonne journée !

  2. 15 sept 2011

    Super, je vais pouvoir faire mon site compatible!

    Merci pour tout.

  3. Kevhdweb
    23 juin 2012

    Merci pour cet article.
    Je voudrais juste préciser pour la méthode « .htaccess » que l’internaute n’a pas la possibilité d’accéder à la version web du site (ce qui peut être utile par moment) car il est sans cesse redirigé vers la version mobile.
    Des gens pour me contredire et me donner une solution ? :)

Trackbacks & Pingbacks

  1. Les tweets qui mentionnent [Tutoriel WebApps] Apprendre à détecter les mobiles | Tuto Mobile -- Topsy.com

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires