Wykrywanie systemu operacyjnego iOS / Android

Przeprowadziłem badania i pytanie to pojawiło się, ale nie w sposób, w jaki zamierzam. Tworzę stronę dla klienta, która jest kodem docelowym QR, który jest miejscem do pobrania aplikacji. Więc nie musi drukować 2 kodów QR na stronie, chciałbym wykryć bieżący system operacyjny (Apple / Android / Inne [nieobsługiwany]) i zmodyfikować moje elementy na podstawie tej wartości.

Przejrzałem skrypt „DetectMobilebrowsers” i ma on na celu jedynie stwierdzenie, czy użytkownik jest w ogóle mobilny, podczas gdy chciałbym dowiedzieć się, z jakiego systemu operacyjnego korzysta użytkownik, i zaproponować najlepszą wersję aplikacji.

Inne odpowiedzi, które uznałem za podobne do tego pytania, wydawały się albo nieaktualne, albo niewiarygodne (nie można ich wykryć w przeglądarkach tabletów z Androidem), więc szukam czegoś nowego. Jak mogę to osiągnąć? (Najlepiej używając jQuery - JavaScript - PHP w tej kolejności).

Możesz przetestować ciąg agenta użytkownika:

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

Rozwiązanie 1: Sniffing agenta użytkownika

Na Androida i iPhone'a:

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

Jeśli chcesz wykryć wszystkie urządzenia mobilne, w tym BlackBerry i Windows Phone, możesz skorzystać z tej kompleksowej wersji:

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
}

Minusy : ciągi agenta użytkownika zmieniają się i są aktualizowane wraz z pojawieniem się nowych telefonów i marek z dnia na dzień. Musisz więc aktualizować tę listę, jeśli chcesz obsługiwać wszystkie urządzenia mobilne.

Rozwiązanie 2: mobilne wykrywanie biblioteki JS

Aby to zrobić, możesz użyć biblioteki JS do wykrywania urządzeń mobilnych .

Wady : te funkcje wykrywania urządzeń oparte na JavaScript mogą działać TYLKO dla smartfonów najnowszej generacji, takich jak urządzenia iPhone, Android i Palm WebOS. Te funkcje wykrywania urządzeń NIE mogą działać w przypadku starszych smartfonów, które miały słabą obsługę JavaScript, w tym starszych urządzeń BlackBerry, PalmOS i Windows Mobile.

Za pomocą navigator.platform można uzyskać system operacyjny, na którym zainstalowana jest przeglądarka.

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

Ten problem został już rozwiązany tutaj: Jaki jest najlepszy sposób na wykrycie urządzenia mobilnego w jQuery? .

Po zaakceptowaniu odpowiedzi w zasadzie sprawdzają, czy jest to iPhone, iPod, urządzenie z Androidem lub cokolwiek, aby zwrócić wartość true. Po prostu zachowaj te, które chcesz na przykładif( /Android/i.test(navigator.userAgent) ) { // some code.. } zwrócą prawdę tylko dla aplikacji klienckich na Androida.

Jednak programy klienckie nie są tak naprawdę niezawodne, ponieważ można je zmienić. Najlepszym rozwiązaniem jest opracowanie uniwersalnego rozwiązania dla wszystkich platform mobilnych.

Możesz to również osiągnąć za pomocą agenta użytkownika na 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();

}

Jeśli używasz React Js na swojej stronie, użyj https://www.npmjs.com/package/react-device-detect

Możesz także tworzyć linki dynamiczne Firbase które będą działać zgodnie z wymaganiami. Obsługuje wiele platform. Link ten można utworzyć zarówno ręcznie, jak i poprzez programowanie. Następnie możesz osadzić ten link w kodzie QR.

Jeśli aplikacja docelowa jest zainstalowana, link przekieruje użytkownika do aplikacji. Jeśli nie zostanie zainstalowany, przekieruje do Sklepu Play / App Store / Dowolnej innej skonfigurowanej witryny.

Do tego i innych rodzajów wykrywania klientów sugeruję bibliotekę js: http://hictech.github.io/navJs/tester/index.html

W celu uzyskania konkretnej odpowiedzi użyj:

navJS.isIOS() || navJS.isAndroid()

Za pomocą wtyczki urządzenia cordova można wykryć

device.platform

będzie „Android” dla Androida i „Windows” dla systemu Windows. Działa na urządzeniu i podczas symulacji w przeglądarce. Oto toast, który wyświetli wartości urządzenia:

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