Med Tahar Zwawa1

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 siteweb est en fait très utile dans notre cas, car de cette façon, nous pouvons faireune redirection aux appareils mobiles à la version mobile (plus adaptée) du site webet 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 foisle type de l’appareil est détecté, nous allons faire une redirection vers la versionmobile 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 lesystème d’exploitation de l’utilisateur. Proposons donc la fonctionisMobile() qui renverra true s’il s’agit d’un client mobile et false dans lecas contraire:

Med Tahar Zwawa2

/php/index.html

Testons ce code sur un pc :

Rien n'est apparu

Med Tahar Zwawa3

Voyons le résultat sur un Androphone :

ii. En utilisant JavaScript

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

Med Tahar Zwawa4

/IAC/Index.html

/IAC/Mobile.html

Med Tahar Zwawa5

Nous allons accéder à l’index.html depuis un pc :

Voyons le résultat avec un Androphone :

Med Tahar Zwawa6

iii. En utilisant les Media-QueriesLes media queries sont assez récentes, elles font parties d’un module

CSS3. Les Media queries permettent d'adapter la présentation ducontenu à un ensemble particulier de périphériques sans changer lecontenu lui-même. Par exemple nous allons appliquer une feuille de styleen fonction de la taille de l’écran :

Si la largeur de l’écran est inférieure à 480 pixels, on vaappliquer 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 :

Med Tahar Zwawa7

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, nousparlerons des applications hybrides.