Détection des mobiles

1. Med Tahar Zwawa
1
Atelier WebMobile : Tutoriel n°2
Détection des mobiles
Objectifs
 Comprendre le principe de détection des mobiles ;
 Maitriser les principales méthodes de détection des mobiles.
Principe
Le processus de détection des appareils qui viennent de se connectés au site
web est en fait très utile dans notre cas, car de cette façon, nous pouvons faire
une redirection aux appareils mobiles à la version mobile (plus adaptée) du site web
et de laisser les autres à se connecter normalement à la version bureau standard.
Méthodes
Les méthodes de détection des appareils mobiles sont nombreuses, une fois
le type de l’appareil est détecté, nous allons faire une redirection vers la version
mobile du site ou simplement appliquer une feuille de style différente.
Remarque : L’adresse ip de mon pc dans ce tutoriel est 192.168.1.4
i. En utilisant PHP
L’idée est de chercher dans le user agent des indicateur sur le
système d’exploitation de l’utilisateur. Proposons donc la fonction
isMobile() qui renverra true s’il s’agit d’un client mobile et false dans le
cas contraire:

2. Med Tahar Zwawa
2
/php/index.html
Testons ce code sur un pc :
 Rien n'est apparu

3. Med Tahar Zwawa
3
Voyons le résultat sur un Androphone :
ii. En utilisant 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:

4. Med Tahar Zwawa
4
/IAC/Index.html
/IAC/Mobile.html

5. Med Tahar Zwawa
5
Nous allons accéder à l’index.html depuis un pc :
Voyons le résultat avec un Androphone :

6. Med Tahar Zwawa
6
iii. En utilisant les Media-Queries
Les media queries sont assez récentes, elles font parties d’un module
CSS3. Les Media queries permettent d'adapter la présentation du
contenu à un ensemble particulier de périphériques sans changer le
contenu lui-même. Par exemple nous allons appliquer une feuille de style
en fonction de la taille de l’écran :
 Si la largeur de l’écran est inférieure à 480 pixels, on va
appliquer le style défini par le fichier smallscreen.css
 Sinon on appliquera celui du fichier largescreen.css
/IAC/media.html
Smallscreen.css
Largescreen.css
Testons ce code sur pc :

7. Med Tahar Zwawa
7
Sur un Androphone on a :
Liens utiles
 http://www.tutomobile.fr/apprendre-a-detecter-les-mobiles-tutoriel-
webapps-n%c2%b01/07/08/2010/
 http://blog.ebuildy.com/2010/06/25/detecter-si-visiteur-vient-dun-iphone-
ipad-ipod-android.html
 http://www.siteduzero.com/forum-83-452972-p1-detection-mobile.html
 http://pierrelachance.net/blog/post/2010/11/21/511-comment-detecter-
des-appareils-mobiles-avec-du-javascript
 https://developer.mozilla.org/fr/CSS/Media_queries
 http://www.kiwano.fr/nouveaute-css-3-media-queries/
******************************
Dans ce second tutoriel, nous avons invoqué la notion de détection des
mobiles afin de faciliter l’accès à notre WebApp. Dans le tutoriel suivant, nous
parlerons des applications hybrides.