Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Détection des mobiles

557 views

Published on

Détection des mobiles

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Détection des mobiles

  1. 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. 2. Med Tahar Zwawa 2 /php/index.html Testons ce code sur un pc :  Rien n'est apparu
  3. 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. 4. Med Tahar Zwawa 4 /IAC/Index.html /IAC/Mobile.html
  5. 5. Med Tahar Zwawa 5 Nous allons accéder à l’index.html depuis un pc : Voyons le résultat avec un Androphone :
  6. 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. 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.

×