Détection du système d'exploitation iOS / Android

186

J'ai fait des recherches et cette question a été soulevée, mais pas de la façon dont je l'entendais. Je construis une page pour un client qui est un atterrissage de code QR, qui est un endroit pour télécharger une application. Il n'a donc pas besoin d'imprimer 2 QR codes sur une page, j'aimerais détecter le système d'exploitation actuel (Apple / Android / Autre [non supporté]) et modifier mes éléments en fonction de cette valeur.

J'ai regardé le script "detectmobilebrowsers" et il vise simplement à dire si l'utilisateur est mobile ou non, alors que j'aimerais savoir quel système d'exploitation l'utilisateur utilise et suggérer la meilleure version de l'application.

D'autres réponses que j'ai trouvées similaires à cette question semblaient obsolètes ou peu fiables (aucune détection pour les navigateurs de tablettes Android), je suis donc à la recherche de quelque chose de nouveau. Comment puis-je atteindre cet objectif? (De préférence en utilisant jQuery - Javascript - PHP dans cet ordre).

Alexandre Lozada
la source
2
L'agent utilisateur ne vous dit pas ce que vous devez savoir?
Babak Naffas
2
Ce problème a déjà été résolu ici: stackoverflow.com/questions/3514784/…
gretro
1
@gretro, qui décrit si l'utilisateur est mobile, pas le système d'exploitation qu'il exécute. Babak, est-ce que quelque chose comme navigator.platform serait la solution? Je ne connais pas les agents utilisateurs. Comment puis-je m'assurer qu'il fonctionnera pour TOUS les appareils Android, quelle que soit la version?
Alexander Lozada
Il n'y a pas de moyen garanti de le détecter, car l'agent utilisateur est la seule chose sur laquelle vous pouvez continuer. Vérifiez ici pour plus d'informations ... whatsmyos.com
Réintégrer Monica Cellio le
2
@Alexander Lozada: Sur la réponse acceptée, ils testent essentiellement si c'est un iPhone, un iPod, un appareil Android ou autre pour retourner vrai. Gardez simplement ceux que vous voulez, par exemple, if( /Android/i.test(navigator.userAgent) ) { // some code.. }ne retournera vrai que pour les agents utilisateurs Android.
gretro

Réponses:

389

Vous pouvez tester la chaîne de l'agent utilisateur:

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}
Feeela
la source
Et l'OP peut consulter cette liste au cas où votre test aurait besoin d'être peaufiné
Juan Mendes
3
Impressionnant. En utilisant le mode mobile de Chrome, vous pouvez le tester sur les navigateurs de bureau.
DaFunkyAlex
4
@feeela parfois, la fonctionnalité est quelque chose comme pouvoir installer des apks, ce qui n'est pas possible de détecter.
Daniel Lubarov
2
J'ai ajouté else if (userAgent.match(/Windows Phone/i)) { return 'WindowsPhone'; } avant l'Android sinon pour détecter Windows Phone. Jusqu'à présent, cela semble fonctionner correctement.
Arthur
4
De stackoverflow.com/a/9039885/177710 : dans le chèque, iOSnous devons également vérifier !window.MSStreampour éviter que IE11 ne soit compté comme iOS;-)
Oliver
12

Solution 1: Reniflage de l'agent utilisateur

Pour Android et iPhone:

if( /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) {
 // run your code here
}

Si vous souhaitez détecter tous les appareils mobiles, y compris le BlackBerry et le téléphone Windows, vous pouvez utiliser cette version complète:

var deviceIsMobile = false; //At the beginning we set this flag as false. If we can detect the device is a mobile device in the next line, then we set it as true.


if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
   deviceIsMobile = true;
}

if(deviceIsMobile){
    // run your code here
}

Les inconvénients : les chaînes des agents utilisateurs changent et sont mises à jour au fur et à mesure que de nouveaux téléphones et marques arrivent de jour en jour. Vous devez donc garder cette liste à jour si vous souhaitez prendre en charge tous les appareils mobiles.

Solution 2: bibliothèque JS de détection mobile

Vous pouvez utiliser la bibliothèque JS mobile detect pour ce faire.

Les inconvénients : ces fonctionnalités de détection d'appareils basées sur JavaScript peuvent UNIQUEMENT fonctionner pour la dernière génération de smartphones, tels que les appareils iPhone, Android et Palm WebOS. Ces fonctionnalités de détection des appareils peuvent NE PAS fonctionner pour les anciens smartphones qui avaient une prise en charge médiocre de JavaScript, y compris les anciens appareils BlackBerry, PalmOS et Windows Mobile.

Iman Sedighi
la source
4

On peut utiliser navigator.platform pour obtenir le système d'exploitation sur lequel le navigateur est installé.

function getPlatform() {
   var platform = ["Win32", "Android", "iOS"];

   for (var i = 0; i < platform.length; i++) {

       if (navigator.platform.indexOf(platform[i]) >- 1) {

           return platform[i];
       }
   }
}

getPlatform();
AKASH KHATRI
la source
13
Sur un Samsung Galaxy Grand Prime que je teste maintenant, navigator.platform renvoie `` Linux armv7l ''
mico
3

Ce problème a déjà été résolu ici: Quelle est la meilleure façon de détecter un appareil mobile dans jQuery? .

Sur la réponse acceptée, ils testent essentiellement si c'est un iPhone, un iPod, un appareil Android ou autre pour retourner vrai. Gardez simplement ceux que vous voulez par exempleif( /Android/i.test(navigator.userAgent) ) { // some code.. } ne retournera vrai que pour les agents utilisateurs Android.

Cependant, les user-agents ne sont pas vraiment fiables puisqu'ils peuvent être modifiés. Le mieux reste de développer quelque chose d'universel pour toutes les plateformes mobiles.

gretro
la source
Si c'est dans jQuery que c'est différent de vanilla JS. Cela pourrait aussi bien être en C.
Alex Jone
2

Vous pouvez également y parvenir avec l'agent utilisateur sur php:

$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);

if(stripos($userAgent,'android') !== false) { // && stripos($userAgent,'mobile') !== false) {
  header('Location: http://oursite.com/download/yourApp.apk');

exit();

}

Hamed Yarandi
la source
2

Si vous utilisez React Js pour votre site Web, utilisez https://www.npmjs.com/package/react-device-detect

Kira
la source
4
Notez que c'est un peu une importation lourde (~ 23 Ko) pour simplement vérifier iOS par rapport à Android.
jessepinho
@jessepinho: vrai. Avec le recul, je ne le ferais pas pour garder ma construction légère. Mais cela a aidé à faire fonctionner les choses.
Kira
1

Vous pouvez également créer des liens dynamiques Firbase qui fonctionneront selon vos besoins. Il prend en charge plusieurs plates-formes. Ce lien peut être créé aussi bien manuellement que par programmation. Vous pouvez ensuite intégrer ce lien dans le code QR.

Si l'application cible est installée, le lien redirigera l'utilisateur vers l'application. S'il n'est pas installé, il sera redirigé vers Play Store / App Store / Tout autre site Web configuré.

Sagar
la source
1

Pour cela et d'autres types de détections de clients, je suggère cette bibliothèque js: http://hictech.github.io/navJs/tester/index.html

Pour votre réponse spécifique, utilisez:

navJS.isIOS() || navJS.isAndroid()
Marco Allori
la source
0

En utilisant le plugin cordova-device-plugin, vous pouvez détecter

device.platform

sera "Android" pour Android et "Windows" pour Windows. Fonctionne sur l'appareil et lors de la simulation sur le navigateur. Voici un toast qui affichera les valeurs de l'appareil:

    window.plugins.toast.showLongTop(
    'Cordova:     ' + device.cordova + '\n' +
    'Model:       ' + device.model + '\n' +
    'Platform:    ' + device.platform + '\n' +
    'UUID:        ' + '\n' +
                      device.uuid + '\n' +
    'Version:     ' + device.version + '\n' +
    'Manufacturer ' + device.manufacturer + '\n' +
    'isVirtual    ' + device.isVirtual + '\n' +
    'Serial       ' + device.serial);
pollaris
la source