Détection des mobiles

488 vues

Publié le

Détection des mobiles

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
488
Sur SlideShare
0
Issues des intégrations
0
Intégrations
68
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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.

×