Détection de la version iPad en JavaScript

Essayez cette violon . Il détecte la version d'iPad par la disponibilité de gyroscope.

Comme vous pouvez le voir dans Safari Developer Library , event.acceleration n'est pas nul sur les périphériques event.acceleration un gyroscope. Puisque iPad 1 ne l'a pas, nous pouvons supposer que cet appareil est iPad 1.

Pour distinguer iPad 2 de l'iPad 3, nous pouvons vérifier une propriété window.devicePixelRatio , car iPad 3 a un affichage Retina avec un rapport pixel == 2.

Désolé mais actuellement il n'y a pas de différence entre iPad et iPad 2.

Voyez, il n'y a pas de différence entre les deux:

 iPad: Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5 iPad2: Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5 

Et notez que les versions sont en constante évolution dans les mises à jour iOS.

METTRE À JOUR

On dirait qu'il y a une différence entre eux:

 iPad: Mobile/8F190 iPad 2: Mobile/8F191 iPad 3: Mobile/9B176 (according to Philipp) 

Détecter entre iPad 1 et 2 étapes:

1. Vérifiez la chaîne UA pour iPad
2. Vérifier le gyroscope

Détecter entre iPad 2 et 3 étapes:

1. Vérifiez la chaîne UA pour iPad
2. Vérifiez la densité de pixels (Retina iPad 3 Displays = 2)

Détecter entre iPad 3 et 4 étapes:

1. Vérifiez la chaîne UA pour iPad
2. Vérifier la densité de pixels (Retina Displays = 2)
3. Vérifiez l'anisotropie maximale des périphériques (iPad 3 = 2, iPad 4 = 16)

L'anisotropie maximale de 16 indique généralement un appareil moderne doté d'une performance graphique décente.

 var gl; var iPadVersion = false; window.ondevicemotion = function(event) { if (!iPadVersion && navigator.platform.indexOf("iPad") != -1) { iPadVersion = 1; if (event.acceleration) iPadVersion = window.devicePixelRatio; } window.ondevicemotion = null; } function initWebGL(canvas) { gl = null; try { gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {} if (!gl) { gl = null; } return gl; } function checkMaxAnisotropy() { var max = 0; var canvas = document.getElementById('webGLCanvasTest'); gl = initWebGL(canvas); try { gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {} if (gl) { var ext = ( gl.getExtension('EXT_texture_filter_anisotropic') || gl.getExtension('MOZ_EXT_texture_filter_anisotropic') || gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic') ); if (ext){ max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT); } } return max; } function isiPad( $window ) { var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera; return (/iPad/).test(ua); } function getiPadVersion( $window ) { if(isiPad(window) && window.devicePixelRatio === 2) { if(checkMaxAnisotropy() < 4) { iPadVersion = 3; } else { iPadVersion = 4; } } return iPadVersion; } /* BONUS CODE isSmartDevice() - Detect most mobile devices isOldDevice() - Detect older devices that have poor video card performance */ function isSmartDevice( $window ) { var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera; return (/iPhone|iPod|iPad|Silk|Android|BlackBerry|Opera Mini|IEMobile/).test(ua); } function isOldDevice() { if(isSmartDevice(window) && window.devicePixelRatio === 1 && checkMaxAnisotropy() < 4 || isiPad( window ) && checkMaxAnisotropy() < 4) { return true; } else { return false; } } alert('iPad Version: ' + getiPadVersion(window) ); 

 #webGLCanvasTest { width: 1px; height: 1px; position: fixed; top: -1px; left: -1px; } 

 <!-- Device Testing Canvas, Hide This Somewhere --> <canvas id="webGLCanvasTest"></canvas> 

Comme d'autres l'ont déjà souligné, il s'agit des 2 utilisateurs actuellement utilisés:

 iPad: Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5 iPad2: Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5 

Mais si vous regardez assez près, ils ne sont pas les mêmes, il y a une différence:

• IPad a "Mobile / 8F190"
• IPad 2 a "Mobile / 8F191"

Donc, vous y allez.

La détection de l'agent utilisateur vous procure la version de l'application Safari, et non la version de l'iPad elle-même, car votre application Web ne fonctionnera que dans l'environnement du navigateur.

Le gyroscope et toutes les autres API sont des API SDK, de sorte qu'elles ne sont disponibles que pour le développement d'applications natives, et non pour les applications Web.

Ressemble à l'iPad 2 peut avoir le même code Mobile / 9B176 que le nouvel iPad. Peut-être est-ce à cause d'une mise à jour d'iOS?

Voici ma chaîne d'agent utilisateur iPad2 complète:

Mozilla / 5.0 (iPad; CPU OS 5_1 comme Mac OS X) AppleWebKit / 534.46 (KHTML, comme Gecko) Version / 5.1 Mobile / 9B176 Safari / 7534.48.3

Je ne peux pas vérifier sur un iPad 3 mis à jour. Quelqu'un pourrait-il me dire s'il y a une différence?

(En passant, si vous voulez juste savoir si l'utilisateur dispose d'un iPad à faible résolution ou haute résolution, vous pouvez utiliser cette astuce: https://stackoverflow.com/a/10142357/974563 )

PLS NE PAS CONFIQUER INTERPRETATION STRING DE L'Agent utilisateur.

Ce n'est pas du tout fiable: je peux voir Mobile / 8J2 sur iPad2 et Mobile / 9A405 sur iPad1. Donc, différentes versions iOS (et donc Safari) alerent différentes UA sur la même version iPad.

Nous devrions aller avec la détection des fonctionnalités d'accélération uniquement; Soit côté client ou côté serveur ( accélération WURFL, etc.).

Que diriez-vous:

 // For use within normal web clients var isiPad = navigator.userAgent.match(/iPad/i) != null; // For use within iPad developer UIWebView // Thanks to Andrew Hedges! var ua = navigator.userAgent; var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua); 

Aussi, vérifiez ceci:

http://davidwalsh.name/detect-ipad