Wykrywanie systemu operacyjnego iOS / Android


186

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


2
Agent użytkownika nie mówi ci, co musisz wiedzieć?
Babak Naffas

2
Ten problem został już rozwiązany tutaj: stackoverflow.com/questions/3514784/…
gretro

1
@Gretro, który opisuje, czy użytkownik jest mobilny, a nie system operacyjny, na którym działa. Babak, czy rozwiązaniem byłoby coś takiego jak navigator.platform? Nie znam agentów użytkownika. Jak mogę się upewnić, że będzie działać na WSZYSTKICH urządzeniach z Androidem niezależnie od wersji?
Alexander Lozada

Nie ma gwarantowanego sposobu, aby to wykryć, ponieważ agent użytkownika to jedyne, co możesz zrobić. Sprawdź tutaj, aby uzyskać więcej informacji ... whatsmyos.com
Przywróć Monikę Cellio

2
@Alexander Lozada: Po zaakceptowaniu odpowiedzi w zasadzie sprawdzają, czy jest to iPhone, iPod, urządzenie z Androidem lub cokolwiek innego, aby powrócić. Po prostu zachowaj te, które chcesz, na przykład if( /Android/i.test(navigator.userAgent) ) { // some code.. }zwrócą prawdę tylko dla aplikacji klienckich na Androida.
gretro

Odpowiedzi:


389

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

I OP może spojrzeć na tę listę, na wypadek gdyby Twój test wymagał ulepszenia
Juan Mendes

3
Niesamowite. Korzystając z trybu mobilnego Chrome, możesz przetestować go w przeglądarkach komputerowych.
DaFunkyAlex,

4
@feeela czasami funkcja ta przypomina instalowanie aplikacji, co nie jest możliwe do wykrycia.
Daniel Lubarov,

2
Dodałem else if (userAgent.match(/Windows Phone/i)) { return 'WindowsPhone'; } przed Androidem jeszcze, jeśli mam wykryć Windows Phone. Jak dotąd wydaje się, że działa dobrze.
Arthur

4
From stackoverflow.com/a/9039885/177710 : w czeku iOSmusimy również zweryfikować, !window.MSStreamaby uniknąć liczenia IE11 jako iOS;-)
Oliver

12

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.


4

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

13
Na telefonie Samsung Galaxy Grand Prime, który testuję, navigator.platforma zwraca „Linux armv7l”
mico

3

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.


Jeśli jest w jQuery, różni się od waniliowej JS. Równie dobrze może być w C.
Alex Jone

2

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

}



1

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.



0

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);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.