Notes

Détecter un iPhone/iPod Touch et proposer une redirection vers le site optimisé

Tags : ,

Voici deux solutions pour détecter si le visiteur est un iPhone ou un iPod Touch et proposer, le cas écheant, une redirection vers la version du site optimisée pour l’écran tactile du périphérique pommesque.

Méthode 1 :

Grâce à un javascript on va détecter si le périphérique utilisé par le visiteur pour naviguer sur votre site est un iPhone ou un iPod Touch. Ensuite, si tel est le cas on va lui proposer de naviguer sur la version optimisée du site à l’aide de la boite de dialogue par défaut de l’iPhone.

- Code original trouvé ici (en anglais) : http://iphonemicrosites.com/tutoria...

1/ Le javascript proposant le choix au travers d’une boite de dialogue, à mettre entre les balises head :

<script type="text/javascript">
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
var question = confirm("Souhaitez-vous naviguer sur le site optimisé pour iPhone?")
if (question){
window.location = "http://iphone.monsite.com/";
}else{

}
}
}
</script>

2/ Appeler la fonction avec la balise body : <body onLoad="iPhoneAlert();">


Méthode 2 :

Une deuxième méthode, moins intrusive et plus personnalisable que la boite de dialogue de l’iPhone, permet d’inclure, dans une div, un lien vers la version optimisée qui ne s’affichera que pour les iPhones.

- Code original trouvé ici (en anglais) : http://iphonemicrosites.com/tutoria...

1/ Le javascript à mettre entre les balises head :

<script type="text/javascript">
function checkClient(){
        if((navigator.userAgent.match(/iPhone/i))||
          (navigator.userAgent.match(/iPod/i))){
        document.getElementById('iphone_alert').innerHTML="<h1 style='text-align:center; border: 10px solid #475a85; -webkit-border-radius: 15px;'><a href='http://iphone.monsite.com'>Tapez ici pour naviguer sur la version du site optimisée pour iPhone.</a></h1>";
        }else{
        document.getElementById('iphone_alert').innerHTML="";
        }
}
</script>

2/ La div vide, à mettre où bon vous semble sur la page d’accueil de votre site :

<div id="iphone_alert"></div>

3/ Appeler la fonction avec la balise body : <body onLoad="checkClient();">

Voilà, à vous de jouer !

© 2017 - Abel Poucet web design