Détecter si le visiteur vient d’un iPhone iPad iPod Android

Avec tous ces mobiles et surtout les forfaits qui vont avec, la part des visiteurs venant d’un mobile est à présent significative. Le hic est que les tailles d’écran proposé (à part le iPad qui n’est pas un mobile…) est souvent minuscule, et donc, très souvent le site visité est inapproprié à la navigation sous mobile. Il existe 3 solutions de détection:

  1. Avec un fichier .htaccess
  2. Avec un script Php
  3. Avec du Javascript

Détection htaccess

L’avantage: le visiteur est redirigé de suite sans charger la page par défaut. La redirection est donc “propre” (par exemple sur un sous domaine: http://mobile.ebuildy.com)

L’inconvénient: il faut réécrire un site compatible
Le principe est simple, dans un htaccess, on va chercher dans le User Agent (String envoyée par le navigateur pour chaque requête HTTP) la présence de mots clés: “iphone,ipod,android” etc etc liste que vous pouvez largement continuer avec palm,smartphone,toshiba,sony,nokia…. bref la liste peut être très très …. longue…Puis si la condition est TRUE, on redirige la requête vers un sous domaine:

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

Ce code est très simple, mais demande de tout refaire dans le sous domaine (images, javascript, css et surtout services Php JSON ou XML si vous en avez…). On va donc rajouter quelques lignes pour empêcher que certains dossiers soient à chaque fois redirigés:

RewriteCond %{REQUEST_URI} !^/services/.*$
 RewriteCond %{REQUEST_URI} !^/images/.*$
 RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad" [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} "android|palm"
 RewriteRule (.*) http://mobile.ebuildy.com [R=301,L]

Pour réécrire votre site compatible mobile, je vous conseille le framework JQTouch très simple à utiliser ou alors du simple CSS avec un peu d'effets JQuery ..

Détection Php

Avantage: simple à mettre en place, donne plus de contrôle, mieux pour le référencement

Inconvénient: mieux vaut avoir un seul point d’entrée Php, moins simple à mettre à jour

Le principe est le même qu’avec la solution htaccess, on va chercher dans le User Agent la présence de iPhone / iPod / Android, coder une fonction globale: isMobileBrowser() qui renvoit TRUE si le visiteur vient d’un mobile ou FALSE sinon puis ensuite activer/désactiver des zones de votre site en fonction de cette valeur ou alors, de changer simplement le fichier CSS avec une version mobile qui change la taille de certaines zone:

function isMobileBrowser()
{
 return strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'android');
}

Détection Javascript

Avantage: super simple, permet une redirection ou de changer la taille des éléments

Inconvénient: demande du code Javascript, charge toute la page

if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i) ) ) { 
     if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://iphone.monsite.net"; 
}

Detect ipad - iphone
Tagged with:
Posted in Developer Tools
4 comments on “Détecter si le visiteur vient d’un iPhone iPad iPod Android
  1. Lilianne says:

    Bonjour,nChez moi quand j’utilise le code en javascriptnnif ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i) ) ) { n if (document.cookie.indexOf(“iphone_redirect=false”) == -1) window.location = “http://iphone.monsite.net”; n}nnn sous mon iphone j’ai le message Impossible d’ouvrir la page Safari ne peut pas ouvrir la page car il y a eu trop de redirections.nOu est l’erreur ?nMerci

  2. Je pense parce que vous ne cru00e9ez jamais le cookie iphone_redirect .nnAvez vous un URL pour un test ?

  3. Bonjour,

    j’ai modifié dans le htaccess de mon site principal comme vous l’indiquiez.
    J’ai une adresse mobile.hitechstore.fr où l’on retrouve la version mobile de mon site.
    J’ai beau mettre mon site dans la redirection, je tombe sur le site http://mobile.ebuildy.com/

    comment modifier cela???

    Cordialement

  4. Satria says:

    Navid در تاریخ ۲۵ آذر ۱۳۹۰ گفته که :salam vaght bekheyr bbtaae ahange pishvaz vaghan mamnoun. movafagh bashiddous daram age matalebe jadid az hamin mataleb va danlowad tem goushe android age has vasam ersal koni, maham ba moarefi saite shoma be doustam shomara komak mikonim.mamnoun

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>