IOS / Android-Betriebssystem erkennen

182

Ich habe einige Nachforschungen angestellt, und diese Frage ist aufgetaucht, aber nicht so, wie ich es beabsichtige. Ich erstelle eine Seite für einen Client, bei der es sich um eine QR-Code-Landung handelt. Hier können Sie eine Anwendung herunterladen. Damit er nicht 2 QR-Codes auf einer Seite ausdrucken muss, möchte ich das aktuelle Betriebssystem (Apple / Android / Andere [nicht unterstützt]) erkennen und meine Elemente basierend auf diesem Wert ändern.

Ich habe mir das Skript "detectmobilebrowsers" angesehen und es soll nur zeigen, ob der Benutzer überhaupt mobil ist oder nicht, während ich herausfinden möchte, welches Betriebssystem der Benutzer ausführt, und die beste Anwendungsversion vorschlagen möchte.

Andere Antworten, die ich ähnlich wie diese Frage gefunden habe, schienen entweder veraltet oder unzuverlässig zu sein (hat keine Erkennung für Android-Tablet-Browser), daher bin ich auf der Suche nach etwas Neuem. Wie kann ich das erreichen? (Verwenden Sie vorzugsweise jQuery - Javascript - PHP in dieser Reihenfolge).

Alexander Lozada
quelle
2
Der Benutzeragent sagt Ihnen nicht, was Sie wissen müssen?
Babak Naffas
2
Dieses Problem wurde hier bereits behoben: stackoverflow.com/questions/3514784/…
gretro
1
@gretro, das beschreibt, ob der Benutzer mobil ist, nicht das Betriebssystem , das er ausführt . Babak, wäre so etwas wie navigator.platform die Lösung? Ich bin mit Benutzeragenten nicht vertraut. Wie kann ich sicherstellen, dass es für ALLE Android-Geräte unabhängig von der Version funktioniert?
Alexander Lozada
Es gibt keine garantierte Möglichkeit , es zu erkennen, da der User - Agent ist das einzige , was Sie weitergehen können. Überprüfen Sie hier für weitere Informationen ... whatsmyos.com
Monica Cellio
2
@Alexander Lozada: Bei der akzeptierten Antwort testen sie im Grunde genommen, ob es sich um ein iPhone, einen iPod, ein Android-Gerät oder was auch immer handelt, um true zurückzugeben. Behalten Sie einfach die gewünschten bei, die beispielsweise if( /Android/i.test(navigator.userAgent) ) { // some code.. }nur für Android-Benutzeragenten true zurückgeben.
Gretro

Antworten:

384

Sie können die Benutzeragentenzeichenfolge testen:

/**
 * 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
quelle
Und das OP kann diese Liste einsehen, falls Ihr Test optimiert werden muss
Juan Mendes
3
Genial. Im mobilen Modus von Chrome können Sie ihn in Desktop-Browsern testen.
DaFunkyAlex
4
@feeela Manchmal ist die Funktion so etwas wie die Möglichkeit, Apks zu installieren, die nicht erkannt werden können.
Daniel Lubarov
2
Ich habe else if (userAgent.match(/Windows Phone/i)) { return 'WindowsPhone'; } vor dem Android sonst hinzugefügt, ob Windows Phone erkannt werden soll. Bisher scheint es gut zu funktionieren.
Arthur
4
Von stackoverflow.com/a/9039885/177710 : Bei der Prüfung müssen iOSwir auch überprüfen !window.MSStream, um zu vermeiden, dass IE11 als gezählt wird iOS;-)
Oliver
12

Lösung 1: User Agent Sniffing

Für Android und iPhone:

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

Wenn Sie alle mobilen Geräte einschließlich Blackberry und Windows Phone erkennen möchten, können Sie diese umfassende Version verwenden:

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
}

Nachteile : Die Zeichenfolgen der Benutzeragenten ändern sich und werden aktualisiert, da Tag für Tag neue Telefone und Marken hinzukommen. Sie müssen diese Liste also auf dem neuesten Stand halten, wenn Sie alle Mobilgeräte unterstützen möchten.

Lösung 2: Mobile Erkennungs-JS-Bibliothek

Sie können dazu die JS-Bibliothek zur mobilen Erkennung verwenden .

Nachteile : Diese JavaScript-basierten Geräteerkennungsfunktionen funktionieren möglicherweise NUR für die neueste Generation von Smartphones, wie z. B. iPhone-, Android- und Palm WebOS-Geräte. Diese Geräteerkennungsfunktionen funktionieren möglicherweise NICHT für ältere Smartphones, die JavaScript nur unzureichend unterstützen, einschließlich älterer BlackBerry-, PalmOS- und Windows Mobile-Geräte.

Iman Sedighi
quelle
4

Sie können navigator.platform verwenden , um das Betriebssystem abzurufen, auf dem der Browser installiert ist.

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
quelle
13
Auf einem Samsung Galaxy Grand Prime, den ich gerade teste, gibt navigator.platform Linux armv7l zurück
mico
3

Dieses Problem wurde hier bereits behoben: Wie kann ein mobiles Gerät in jQuery am besten erkannt werden?.

Bei der akzeptierten Antwort testen sie im Grunde, ob es sich um ein iPhone, einen iPod, ein Android-Gerät oder was auch immer handelt, um true zurückzugeben. Behalten Sie einfach die, die Sie zum Beispiel wollenif( /Android/i.test(navigator.userAgent) ) { // some code.. } nur für Android-Benutzeragenten true zurückgeben.

Benutzeragenten sind jedoch nicht wirklich zuverlässig, da sie geändert werden können. Das Beste ist immer noch, etwas Universelles für alle mobilen Plattformen zu entwickeln.

gretro
quelle
Wenn es in jQuery ist, unterscheidet es sich von Vanilla JS. Es könnte genauso gut in C. sein
Alex Jone
2

Sie können dies auch mit dem Benutzeragenten auf PHP erreichen:

$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
quelle
2

Wenn Sie React Js für Ihre Website verwenden, verwenden Sie https://www.npmjs.com/package/react-device-detect

Kira
quelle
3
Beachten Sie, dass dies ein ziemlich schwerer Import (~ 23 KB) ist, um nur iOS oder Android zu überprüfen.
Jessepinho
@ Jessepinho: wahr. Im Nachhinein würde ich das nicht tun, um meinen Körperbau leicht zu halten. Aber es hat geholfen, die Dinge zum Laufen zu bringen.
Kira
1

Sie können auch Firbase Dynamic-Links erstellen die Ihren Anforderungen entsprechen. Es unterstützt mehrere Plattformen. Dieser Link kann sowohl manuell als auch über die Programmierung erstellt werden. Sie können diesen Link dann in den QR-Code einbetten.

Wenn die Ziel-App installiert ist, leitet der Link den Benutzer zur App weiter. Wenn es nicht installiert ist, wird es zum Play Store / App Store / zu jeder anderen konfigurierten Website weitergeleitet.

Sagar
quelle
1

Für diese und andere Arten der Clienterkennung empfehle ich diese js-Bibliothek: http://hictech.github.io/navJs/tester/index.html

Verwenden Sie für Ihre spezifische Antwort:

navJS.isIOS() || navJS.isAndroid()
Marco Allori
quelle
0

Mit dem Cordova-Device-Plugin können Sie erkennen

device.platform

wird "Android" für Android und "Windows" für Windows sein. Funktioniert auf dem Gerät und beim Simulieren im Browser. Hier ist ein Toast, der die Gerätewerte anzeigt:

    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
quelle