web-dev-qa-db-fra.com

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

J'ai fait des recherches et cette question a été soulevée, mais pas comme je le souhaite. Je construis une page pour un client qui correspond à un code QR, qui permet de télécharger une application. Donc, il n'a pas à imprimer 2 codes QR sur une page, j'aimerais détecter le système d'exploitation actuel (Apple/Android/Other [non pris en charge]) et modifier mes éléments en fonction de cette valeur.

J'ai examiné le script "detectmobilebrowsers", qui vise uniquement à indiquer si l'utilisateur est mobile ou non, alors que je voudrais savoir quel système d'exploitation l'utilisateur exécute et suggérer la meilleure version de l'application.

D'autres réponses que j'ai trouvées similaires à cette question semblaient être 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? (Utilisez de préférence jQuery - Javascript - PHP dans cet ordre).

javascriptjquerybrowser-detection
129
Alexander Lozada

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

Solution 1: détection 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 BlackBerry et Windows Phone, 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
}

Cons: les chaînes d'agent utilisateur 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 maintenir cette liste à jour si vous souhaitez prendre en charge tous les appareils mobiles.

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

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

Cons: 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 fonctions de détection de périphérique risquent de NE PAS fonctionner avec les smartphones plus anciens qui ne supportaient pas JavaScript, y compris les anciens terminaux BlackBerry, PalmOS et Windows Mobile.

8
Iman Sedighi

Ce problème a déjà été résolu ici: Quel est le meilleur moyen 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. Il suffit de garder ceux que vous voulez. Par exemple, if( /Android/i.test(navigator.userAgent) ) { // some code.. } ne retournera la valeur true que pour les agents utilisateurs Android.

Cependant, les agents utilisateurs ne sont pas vraiment fiables car ils peuvent être changés. La meilleure chose à faire est encore de développer quelque chose d'universel pour toutes les plateformes mobiles.

4
gretro

Vous pouvez 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();
3
AKASH KHATRI

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

}

2
Hamed Yarandi

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

1
Kira

Vous pouvez également créer Liens dynamiques Firbase qui fonctionneront selon vos besoins. Il supporte plusieurs plates-formes. Ce lien peut être créé manuellement ou 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 le Play Store/App Store/Tout autre site Web configuré.

1
Sagar

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 un 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);
0
pollaris