Melhor maneira de detectar computadores Mac OS X ou Windows com JavaScript ou jQuery

110

Estou tentando mover o botão "Fechar" para o lado esquerdo quando o usuário está no Mac e para o lado direito quando o usuário está no PC. Agora estou fazendo isso examinando o agente do usuário, mas ele pode ser facilmente falsificado para uma detecção confiável do sistema operacional. Existe uma maneira infalível de detectar se o sistema operacional no qual o navegador está sendo executado é Mac OS X ou Windows? Se não, o que é melhor do que farejar o agente do usuário?

alt
fonte
20
Se o usuário manipula o useragent, não é esse o problema? Eu se preocupar com isso quando dói você para que eles tenham uma useragent inválido (por exemplo, quando se lhes dá acesso a algo que você não deseja que eles têm), mas para algo como isso, por que você está enfatizando? Deixe-os dar um tiro no próprio pé e ter que lidar com as consequências - sem suor nas costas, companheiro.
Mahmoud Al-Qudsi
bem, mais uma dica do que uma resposta. Você pode detectar o IE com comentários condicionais. isto é +1 para o arsenal de detecção de janelas. mas isso falharia se o IE fosse executado em um emulador em outro sistema operacional (como Wine no Linux). A propósito, e quanto ao Linux?
Joseph
@ MahmoudAl-Qudsi Mesmo sem spoofing, o Firefox móvel muitas vezes finge ser o Safari, o Opera muitas vezes finge que é o Firefox em algumas versões. Sem spoofing, o agente do usuário ainda é MUITO não confiável.
alt
Possível duplicata: stackoverflow.com/q/7044944/55209
Artem Koshelev
Mas a resposta dessa pergunta é apenas "agentes do usuário".
alt

Respostas:

192

A propriedade window.navigator.platform não é falsificada quando a string userAgent é alterada. Eu testei no meu Mac se eu mudar o userAgent para iPhone ou Chrome Windows, navigator.platform continua sendo MacIntel.

navigator.platform não é falsificado quando a string userAgent é alterada

A propriedade também é somente leitura

navigator.platform é somente leitura


Eu poderia chegar à seguinte tabela

Computadores Mac

Mac68K Sistema Macintosh 68K.
MacPPC Sistema Macintosh PowerPC.
MacIntel Sistema Macintosh Intel.

Dispositivos iOS

iPhone Iphone.
iPod iPod Touch.
iPad iPad.


Os macs modernos estão de volta, navigator.platform == "MacIntel"mas para dar alguma "prova futura", não use a correspondência exata, com sorte eles mudarão para algo como MacARMou MacQuantumno futuro.

var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;

Para incluir iOS que também usa o "lado esquerdo"

var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
var isIOS = /(iPhone|iPod|iPad)/i.test(navigator.platform);


Como a maioria dos sistemas operacionais usa o botão Fechar à direita, você pode simplesmente mover o botão Fechar para a esquerda quando o usuário está em um MacLike OS, caso contrário, não será um problema se você colocá-lo no lado mais comum, o direito.

setTimeout(test, 1000); //delay for demonstration

function test() {

  var mac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);

  if (mac) {
    document.getElementById('close').classList.add("left");
  }
}
#window {
  position: absolute;
  margin: 1em;
  width: 300px;
  padding: 10px;
  border: 1px solid gray;
  background-color: #DDD;
  text-align: center;
  box-shadow: 0px 1px 3px #000;
}
#close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 22px;
  height: 22px;
  margin: -12px;
  box-shadow: 0px 1px 3px #000;
  background-color: #000;
  border: 2px solid #FFF;
  border-radius: 22px;
  color: #FFF;
  text-align: center;
  font: 14px"Comic Sans MS", Monaco;
}
#close.left{
  left: 0px;
}
<div id="window">
  <div id="close">x</div>
  <p>Hello!</p>
  <p>If the "close button" change to the left side</p>
  <p>you're on a Mac like system!</p>
</div>

http://www.nczonline.net/blog/2007/12/17/don-t-forget-navigator-platform/

Vitim.us
fonte
3
@ Vitim.us muito obrigado pela resposta detalhada, você realmente salvou meu dia :)
vivekkupadhyay
1
MacQuantum fez meu dia. 😂
Íhor Mé
A propriedade da plataforma é somente leitura, mas ainda é possível falsificá-la: stackoverflow.com/questions/2166540/…
Ryan Burbidge
1
@Qix Uma melhoria ainda melhor seria substituir str.match(regexp) ? true : falsepor regexp.test(string). O RegExp.prototype.test()método retorna nativamente um booleano. Portanto, meu código preferido é const platformIsMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);.
Rory O'Kane
52

É simples assim:

function isMacintosh() {
  return navigator.platform.indexOf('Mac') > -1
}

function isWindows() {
  return navigator.platform.indexOf('Win') > -1
}

Você pode fazer coisas engraçadas como:

var isMac = isMacintosh();
var isPC = !isMacintosh();
Benny Neugebauer
fonte
1
Bem, isso cobre dois sistemas operacionais. Aqui está uma lista mais abrangente (mas possivelmente ainda incompleta), que inclui Linux, BSD, Android, Palm, Sony Playstations, etc .: stackoverflow.com/questions/19877924/…
Michael Scheper
Se você quiser abranger mais sistemas operacionais, deve ir para uma biblioteca como Platform.js: github.com/bestiejs/platform.js
Benny Neugebauer
@BennyNeugebauer isPCnão deve ser igual a !isMacintosh();. E se o usuário estiver no Linux ou em qualquer outra plataforma diferente? Ele detectará que eles não estão no mac e pensará que estão no PC.
Místico
@EternalDarknessÉ por isso que o chamei isPC(e não isWindowsou isLinux) porque o Linux roda em PCs, mas o macOS só roda em Macs.
Benny Neugebauer
5

É isso que você está procurando? Caso contrário, me avise e eu removerei esta postagem.

Experimente este plugin jQuery: http://archive.plugins.jquery.com/project/client-detect

Demo: http://www.stoimen.com/jquery.client.plugin/

Isso é baseado no quirksmode BrowserDetect um wrap para o plugin de detecção de navegador / sistema operacional jQuery.

Para leitores interessados:
http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www.quirksmode.org/js/support.html

E mais código sobre o plugin reside aqui: http://www.stoimen.com/jquery.client.plugin/jquery.client.js

Tats_innit
fonte
2
CARA! Eu falsifiquei meu agente de usuário e ele ainda me detectou no Safari para Mac! Obrigado BRUV.
alt
1
@JacksonGariety Não se preocupe bruv :)) leia mais detalhes aqui tem todo o código resinding :) stoimen.com/jquery.client.plugin/jquery.client.js Tenha um bom brosniac :) saúde!
Tats_innit
@Derek hiya bruv - ele usa o plugin do navegador quirkmode e detecta para o navegador / sistema operacional, veja aqui quirksmode.org/js/detect.html e veja mais stoimen.com/jquery.client.plugin/jquery.client.js & quirksmode.org /js/support.html espero que isso faça sentido bruv :)
Tats_innit
Esqueça, isso parece apenas estar usando agentes de usuário ... isso é meio ruim.
alt
1
Não é realmente a resposta que procuro. É mesmo possível?
alt
0

Deixe-me saber se isso funciona. Maneira de detectar um dispositivo Apple (computadores Mac, iPhones, etc.) com ajuda de StackOverflow.com :
Qual é a lista de valores possíveis para navigator.platform atualmente?

var deviceDetect = navigator.platform;
var appleDevicesArr = ['MacIntel', 'MacPPC', 'Mac68K', 'Macintosh', 'iPhone', 
'iPod', 'iPad', 'iPhone Simulator', 'iPod Simulator', 'iPad Simulator', 'Pike 
v7.6 release 92', 'Pike v7.8 release 517'];

// If on Apple device
if(appleDevicesArr.includes(deviceDetect)) {
    // Execute code
}
// If NOT on Apple device
else {
    // Execute code
}
RisingPhoenix1979
fonte