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

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).

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";
}

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.

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();

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.

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();

}

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

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é.

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()

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);