IOS / Android-Betriebssystem erkennen

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

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

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.

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

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.

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

}}

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

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.

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

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