Je travaille en ce moment sur une web app (html5, css3, terminaux mobiles, media queries et compagnie) et je cherchais un test simple pour détecter si on se trouve sur un iPad 3. Ne trouvant pas mon bonheur du côté de Modernizr, j’ai finit par tomber sur deux choses qui à mon sens sont suffisamment précises pour obtenir un test fiable. Et oui je parle bien de tester le user agent…
Bouuu trop la loose de tester le user agent. Ouais mais bon ça a le mérite d’être ultra rapide à écrire 😛 et puis faute de mieux c’est ce que je vais utiliser.
Habituellement on teste la totalité de la chaîne de caractères (le user agent donc) avec une regex et ça donne un truc comme ça :
if (navigator.userAgent.match(/iPad/i)) { /*doSomethingAwesome...*/ }
C’est simple rapide et concis mais on peut pas cibler un iPad 3 versus un iPad 2 par exemple. En fait on peut affiner le test pour être du coup quasi sûr de ne pas se tromper.
1. window.pixelRatio
Le pixelRatio aura la valeur “2” pour les iOS avec écran Rétina, c’est-à-dire les écrans HD d’Apple actuellement équipés sur les iPhone 4, 4S et iPad 3. Et il aura la valeur “1” notamment pour les iPhone 3GS, les iPad 1 et 2.
2. navigator.platform
Contrairement à navigator.userAgent (qui renvoi une chaîne interminable) eh bien lui il ne renvoi qu’une toute partie du user agent, en l’occurrence seulement ce qui concerne la plateforme. Et il se trouve que pour l’iPad le navigator.platform c’est “iPad” 🙂 cool non ? Plus rapide que de tester TOUTE la chaîne avec une regex.
Et donc j’en suis arrivé à ce petit bout de js, très moche certes mais on s’en fiche, sous cette forme il a un côté facile à appréhender.
if (window.devicePixelRatio === 2) {
if (navigator.platform === "iPad") {
alert('iPad 3');
} else if (navigator.platform === 'iPhone') {
alert("iPhone 4");
};
} else {
if (navigator.platform === 'iPad') {
alert('iPad 2');
} else if (navigator.platform === 'iPhone') {
alert('iPhone 3');
}
};
Après on prend que certaines parties ou bien on l’adapte à ses besoins selon l’humeur.
Ressources
Modernizr : pour faire de la feature detection plutôt que du test de user agent
HTML5 Mobile Boilerplate : pleins de ressources pour faire de la web app
Alex Gibson demo page : pour utiliser un splash screen comme dans les apps natives
