Afficher une version Mobile

1. Utiliser un fichier .htaccess

On va utiliser la fonction de redirection conditionnelle. Avec ce code on redirige le navigateur sur une adresse URL pour mobile :

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

Ce code indique au serveur Apache de chercher les mots clés dans le user agent et d’effectuer une redirection si l’un de ses mots est trouvé. En mettant ce fichier .htaccess à la racine de votre site, les visiteurs utilisant un mobile précisé dans ce fichier seront automatiquement redirigé et ce quelque soit le point d’entrée par lequel ils arrivent.

Ce système est très simple à mettre en place est à maintenir, de plus il s’agit d’une méthode de redirection plutôt propre. Il faut néanmoins que votre configuration Apache autorise les htaccess.

2. En PHP

En PHP l’idée est la même, à savoir chercher dans le user agent des indicateur sur le système d’exploitation de l’utilisateur. Nous allons donc écrire une fonction qui renverra true s’il s’agit d’un client mobile et false dans le cas contraire:

function isMobile(){
//User agent
$ua = $_SERVER['HTTP_USER_AGENT'];
//test si il s'agit d'un mobile
return preg_match('/iphone/i',$ua) || preg_match('/android/i',$user_agent)
||preg_match('/blackberry/i',$user_agent);

}

Cette méthode vous donnera un peu plus de liberté que le htaccess, vous pourrez ainsi effectuer une redirection ou faire appel à une feuille de style adapté au média visé.

Si vous optez pour cette solution, je vous conseille detectmobilebrowsers qui propose une fonction de détection de mobile dont la liste des appareils mobile est assez exhaustive et régulièrement mis à jour.

La fonction est très simple d’utilisation. voici son entête :

function mobile_device_detect($iphone=true,$ipad=true,$android=true,$opera=true,
                              $blackberry=true,$palm=true,$windows=true,
                              $mobileredirect=false,$desktopredirect=false)

Exemple de redirection avec cette fonction:

mobile_device_detect(true,true,true,true,true,true,true,'http://www.m.domaine.fr');

Note : Dans cette partie je serais souvent amené à illustrer un concept par du code PHP, le code pourra la plupart du temps être traduit dans un autre langage exécuté coté serveur.

3. En 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:

if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
window.location = "http://mobile.votredomaine.com"; }

Appliquer cette technique est assez simple, le javascript est pris en charge par la plupart des navigateurs mobiles récent de plus les possibilités sont très nombreuses, vous avez la possibilité de faire des redirections, modifier les styles des element ou encore de manipuler le DOM de votre page web, cependant dans le cadre d’une redirection je ne pense que ce soit la solution la plus adaptées car la page se chargera entièrement avant de rediriger l’utilisateur, ce qui n’est pas très performant.

4. En utilisant les media-queries

Les media queries sont assez récentes, elles font parties d’un module CSS3. Elles vont permettre d’appliquer une feuille de style ou une propriété CSS en fonction des caractéristiques matériel du média utilisé. Par exemple on va pouvoir appliquer une feuille de style en fonction de la taille de l’écran.

Exemple d’appel CSS:

<link type="text/css" rel="stylesheet"  media="only screen and (max-device-width: 480px)" href="mobile.css">

Cette feuille de style sera appliqué à tous les terminaux dont la taille de l’écran sera au maximum de 480px. Il est possible de combiner votre requête avec plusieurs critères, pour en savoir plus je vous invite à aller faire un tour sur le site de Mozilla.

Avec cette solution vous aurez l’assurance de couvrir la quasi totalité du parc mobile car les critères de requête ce font sur des paramètres matériel (taille de l’écran, couleur affichée, écran tactile…). Les media queries me semblent particulièrement adaptés dans le cas où une WebApp diffère de la versions classique uniquement par son style. L’autre gros avantage est la facilité de maintenance.

Source : http://www.tutomobile.fr/apprendre-a-detecter-les-mobiles-tutoriel-webapps-n%C2%B01/07/08/2010/