Detectando o sistema operacional iOS / Android

186

Eu fiz algumas pesquisas e essa pergunta surgiu, mas não da maneira que pretendo. Estou criando uma página para um cliente que é um código QR, que é um local para baixar um aplicativo. Para que ele não precise imprimir 2 códigos QR em uma página, gostaria de detectar o sistema operacional atual (Apple / Android / Outro [não suportado]) e modificar meus elementos com base nesse valor.

Eu observei o script "detectmobilebrowsers" e que visa apenas determinar se o usuário é ou não móvel, enquanto eu gostaria de descobrir qual sistema operacional o usuário está executando e sugerir a melhor versão do aplicativo.

Outras respostas que achei semelhantes a essa pergunta pareciam desatualizadas ou não confiáveis ​​(não tem detecção para navegadores de tablets Android), por isso estou procurando algo novo. Como posso conseguir isso? (De preferência, usando jQuery - Javascript - PHP nessa ordem).

Alexander Lozada
fonte
2
O agente do usuário não diz o que você precisa saber?
Babak Naffas
2
Esse problema já foi resolvido aqui: stackoverflow.com/questions/3514784/…
gretro
1
@gretro, que descreve se o usuário é móvel, não o sistema operacional em que está executando. Babak, seria algo como navigator.platform a solução? Não estou familiarizado com os agentes do usuário. Como posso garantir que funcione para TODOS os dispositivos Android, independentemente da versão?
Alexander Lozada
Não há uma maneira garantida de detectá-lo, pois o agente do usuário é a única coisa em que você pode continuar. Verifique aqui para obter mais informações ... whatsmyos.com
Restabelecer Monica Cellio
2
@Alexander Lozada: Na resposta aceita, eles basicamente testam se é um iPhone, um iPod, um dispositivo Android ou o que quer que seja verdadeiro. Basta manter os que você deseja, por exemplo if( /Android/i.test(navigator.userAgent) ) { // some code.. }, retornará verdadeiro apenas para agentes do usuário Android.
gretro 12/02

Respostas:

389

Você pode testar a sequência do agente do usuário:

/**
 * 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
fonte
E o OP pode olhar para esta lista caso seu teste precise ser ajustado
Juan Mendes
3
Impressionante. Usando o modo móvel do Chrome, você pode testá-lo em navegadores de desktop.
DaFunkyAlex
4
@feeela às vezes o recurso é algo como poder instalar aplicativos, o que não é possível detectar.
21416 Daniel Lubarov
2
Eu adicionei else if (userAgent.match(/Windows Phone/i)) { return 'WindowsPhone'; } antes do Android mais se detectar o Windows Phone. Até agora parece estar funcionando bem.
Arthur
4
De stackoverflow.com/a/9039885/177710 : na verificação de iOSque precisamos para também verificar !window.MSStreampara evitar IE11 sendo contado como iOS;-)
Oliver
12

Solução 1: Sniffing do agente do usuário

Para Android e iPhone:

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

Se você deseja detectar todos os dispositivos móveis, incluindo blackberry e Windows phone, pode usar esta versão abrangente:

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 : as sequências de agentes do usuário estão mudando e sendo atualizadas à medida que novos telefones e marcas estão chegando dia após dia. Então, você precisa manter esta lista atualizada se quiser suportar todos os dispositivos móveis.

Solução 2: biblioteca JS de detecção móvel

Você pode usar a biblioteca JS de detecção móvel para fazer isso.

Contras : esses recursos de detecção de dispositivos baseados em JavaScript podem funcionar APENAS para a mais nova geração de smartphones, como os dispositivos iPhone, Android e Palm WebOS. Esses recursos de detecção de dispositivo NÃO podem funcionar em smartphones mais antigos que não oferecem suporte a JavaScript, incluindo dispositivos BlackBerry, PalmOS e Windows Mobile mais antigos.

Iman Sedighi
fonte
4

Pode-se usar navigator.platform para obter o sistema operacional no qual o navegador está instalado.

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
fonte
13
Em um Samsung Galaxy Grand Prime que estou testando agora, o navigator.platform retorna '' Linux armv7l ''
mico
3

Este problema já foi resolvido aqui: Qual é a melhor maneira de detectar um dispositivo móvel no jQuery? .

Na resposta aceita, eles basicamente testam se é um iPhone, um iPod, um dispositivo Android ou o que quer que seja verdadeiro. Basta manter os que você deseja, por exemplo if( /Android/i.test(navigator.userAgent) ) { // some code.. }, retornará verdadeiro apenas para agentes do usuário Android.

No entanto, os user-agents não são realmente confiáveis, pois podem ser alterados. O melhor ainda é desenvolver algo universal para todas as plataformas móveis.

gretro
fonte
Se estiver no jQuery, será diferente do JS vanilla. Ele poderia muito bem estar em C.
Alex Jones
2

Você também pode conseguir isso com o user agent no 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();

}

Hamed Yarandi
fonte
2

Se você estiver usando o React Js no seu site, use https://www.npmjs.com/package/react-device-detect

Kira
fonte
4
Observe que isso é um pouco de importação pesada (~ 23kb) para apenas verificar iOS vs. Android.
jessepinho 18/03/19
@jessepinho: verdade. Em retrospectiva, eu não faria isso para manter minha constituição leve. Mas ajudou a fazer as coisas funcionarem.
Kira
1

Você também pode criar links dinâmicos do Firbase que funcionarão conforme sua exigência. Ele suporta múltiplas plataformas. Este link pode ser criado, tanto manualmente quanto via programação. Você pode incorporar esse link no código QR.

Se o aplicativo de destino estiver instalado, o link redirecionará o usuário para o aplicativo. Se não estiver instalado, ele será redirecionado para a Play Store / App Store / Qualquer outro site configurado.

Sagar
fonte
1

Para este e outros tipos de detecção de clientes, sugiro esta biblioteca js: http://hictech.github.io/navJs/tester/index.html

Para sua resposta específica, use:

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

Usando o cordova-device-plugin, você pode detectar

device.platform

será "Android" para Android e "Windows" para Windows. Funciona no dispositivo e ao simular no navegador. Aqui está um brinde que exibirá os valores do 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);
pollaris
fonte