Detección del sistema operativo iOS / Android

He investigado un poco, y esta pregunta ha surgido, pero no de la manera que pretendo. Estoy creando una página para un cliente que es un aterrizaje de código QR, que es un lugar para descargar una aplicación. Para que no tenga que imprimir 2 códigos QR en una página, me gustaría detectar el sistema operativo actual (Apple / Android / Other [no compatible]) y modificar mis elementos en función de ese valor.

He examinado el script "detectmobrowbrowsers" y solo tiene como objetivo determinar si el usuario es móvil o no, mientras que me gustaría averiguar qué sistema operativo está ejecutando el usuario y sugerir la mejor versión de la aplicación.

Otras respuestas que encontré similares a esta pregunta parecían obsoletas o poco confiables (no tiene detección para los navegadores de tabletas Android), por lo que estoy buscando algo nuevo. ¿Cómo puedo conseguir esto? (Preferiblemente usando jQuery - Javascript - PHP en ese orden).

Puede probar la cadena del agente de usuario:

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

Solución 1: Detección de agentes de usuario

Para Android y iPhone:

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

Si desea detectar todos los dispositivos móviles, incluidos Blackberry y Windows Phone, puede utilizar esta versión completa:

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
}

Contras : las cadenas de agentes de usuario están cambiando y actualizándose a medida que nuevos teléfonos y marcas llegan día a día. Por lo tanto, debe mantener esta lista actualizada si desea admitir todos los dispositivos móviles.

Solución 2: biblioteca JS de detección móvil

Puede usar la biblioteca JS de detección móvil para hacer esto.

Contras : Estas funciones de detección de dispositivos basadas en JavaScript SOLO pueden funcionar para la última generación de teléfonos inteligentes, como los dispositivos iPhone, Android y Palm WebOS. Es posible que estas funciones de detección de dispositivos NO funcionen para teléfonos inteligentes más antiguos que tenían poca compatibilidad con JavaScript, incluidos los dispositivos BlackBerry, PalmOS y Windows Mobile más antiguos.

Se puede usar navigator.platform para obtener el sistema operativo en el que está instalado el navegador.

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

Este problema ya se ha resuelto aquí: ¿Cuál es la mejor manera de detectar un dispositivo móvil en jQuery?.

En la respuesta aceptada, básicamente prueban si es un iPhone, un iPod, un dispositivo Android o lo que sea que sea cierto. Solo mantén los que quieras por ejemploif( /Android/i.test(navigator.userAgent) ) { // some code.. } se devolverán verdaderos solo para los agentes de usuario de Android.

Sin embargo, los agentes de usuario no son realmente confiables ya que se pueden cambiar. Lo mejor es desarrollar algo universal para todas las plataformas móviles.

También puede lograr esto con el agente de usuario en 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();

}

Si está utilizando React Js para su sitio web, use https://www.npmjs.com/package/react-device-detect

También puede crear enlaces dinámicos de Firbase que funcionarán según sus necesidades. Es compatible con múltiples plataformas. Este enlace se puede crear, tanto manualmente como a través de la programación. Luego puede incrustar este enlace en el código QR.

Si la aplicación de destino está instalada, el enlace redirigirá al usuario a la aplicación. Si no está instalado, redirigirá a Play Store / App store / Cualquier otro sitio web configurado.

Para este y otro tipo de detecciones de clientes, sugiero esta biblioteca js: http://hictech.github.io/navJs/tester/index.html

Para su respuesta específica use:

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

Usando el plugin cordova-device, puedes detectar

device.platform

será "Android" para Android y "Windows" para Windows. Funciona en el dispositivo y al simular en el navegador. Aquí hay un brindis que mostrará los valores del dispositivo:

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