javascript - sirve - Detectando el sistema operativo iOS/Android

para que sirve javascript en iphone

Question

Investigué un poco, y esta pregunta surgió, pero no de la manera que pretendo. Estoy construyendo una página para un cliente que es un aterrizaje de código QR, que es un lugar para descargar una aplicación. Así que no tiene que imprimir 2 códigos QR en una página, me gustaría detectar el sistema operativo actual (Apple / Android / Otro [no compatible]) y modificar mis elementos en función de ese valor.

He visto el guión "detectar motos móviles" y solo tiene como objetivo indicar si el usuario es o no móvil, 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 desactualizadas o no fiables (no tiene detección para los navegadores de tableta Android), así que estoy en busca de algo nuevo. ¿Cómo puedo conseguir esto? (Preferentemente usando jQuery - Javascript - PHP en ese orden).

Answer 1

Solución 1: Sniffing de agente de usuario

Para Android y iPhone:

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

Si quiere detectar todos los dispositivos móviles, incluidos Blackberry y Windows Phone, puede usar 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 agente de usuario cambian y se actualizan 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 de detección móvil JS

Puede usar la biblioteca de detección móvil JS 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 los teléfonos inteligentes más antiguos que tienen poca compatibilidad con JavaScript, incluidos los dispositivos BlackBerry, PalmOS y Windows Mobile anteriores.

Answer 2

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

En la respuesta aceptada, básicamente prueban si se trata de un iPhone, un iPod, un dispositivo Android o lo que sea que sea cierto. Simplemente guarde los que desee, por ejemplo, if( /Android/i.test(navigator.userAgent) ) { // some code.. } devolverá verdadero solo para los usuarios-agentes de Android.

Sin embargo, los usuarios-agentes no son realmente confiables ya que pueden ser cambiados. Lo mejor es desarrollar algo universal para todas las plataformas móviles.

Answer 3

No hay necesidad de jQuery aquí. Además, navigator.platform está en desuso.

Me encontré con el mismo problema y realicé una investigación sobre la cadena de varios agentes de usuario para diferentes plataformas móviles.

Escribí este componente móvil que puede detectar si se está ejecutando en un dispositivo iOS o Android, y también en otras plataformas, y tiene en cuenta varios casos extremos. En general, también puede informarle si se está ejecutando en CUALQUIER dispositivo móvil.

No dude en importarlo y usarlo como se muestra en estos ejemplos:

isMobile.Android() => true/false
isMobile.iOS() => true/false
isMobile.Windows() => true/false
isMobile.BlackBerry() => true/false
isMobile.any() => true/false

Answer 4

Puede probar la cadena de 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://.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

Answer 5

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

Answer 6

También puede crear enlaces de Firbase Dynamic 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. A continuación, puede insertar este enlace en código QR.

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

Answer 7

Usando el cordova-device-plugin, puedes detectar

device.platform

será "Android" para Android, y "windows" para windows. Funciona en el dispositivo y cuando se simula 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);