La mejor manera de detectar computadoras Mac OS X o Windows con JavaScript o jQuery

110

Así que estoy tratando de mover un botón "cerrar" al lado izquierdo cuando el usuario está en Mac y al lado derecho cuando el usuario está en PC. Ahora lo hago examinando el agente de usuario, pero se puede falsificar con demasiada facilidad para una detección confiable del sistema operativo. ¿Existe una forma segura de detectar si el sistema operativo en el que se ejecuta el navegador es Mac OS X o Windows? Si no es así, ¿qué es mejor que el rastreo de agentes de usuario?

alt
fuente
20
Si el usuario manipula al agente de usuario, ¿no es ese su problema? Me preocuparía cuando te duele que tengan un useragent inválido (por ejemplo, cuando les da acceso a algo que no quieres que tengan), pero para algo como esto, ¿por qué te estresas? Deje que se pegue un tiro en el pie y tenga que lidiar con las consecuencias. No se preocupe, amigo.
Mahmoud Al-Qudsi
bueno, más un consejo que una respuesta. Puede detectar IE con comentarios condicionales. esto es +1 al arsenal de detección de Windows. pero esto fallaría si IE se ejecutara en un emulador en otro sistema operativo (como Wine en Linux). Por cierto, ¿qué tal linux?
Joseph
@ MahmoudAl-Qudsi Incluso sin suplantación de identidad, Firefox móvil a menudo finge que es Safari, Opera a menudo finge que es Firefox en algunas versiones. Sin suplantación de identidad, el agente de usuario sigue siendo MUY poco fiable.
alternativo
Posible duplicado: stackoverflow.com/q/7044944/55209
Artem Koshelev
Pero la respuesta a esa pregunta es simplemente "agentes de usuario".
alt

Respuestas:

192

La propiedad window.navigator.platform no se falsifica cuando se cambia la cadena userAgent. Probé en mi Mac si cambio el userAgent a iPhone o Chrome Windows, navigator.platform sigue siendo MacIntel.

navigator.platform no se falsifica cuando se cambia la cadena userAgent

La propiedad también es de solo lectura

navigator.platform es de solo lectura


Se me ocurrió la siguiente tabla

Computadoras Mac

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

Dispositivos iOS

iPhone iPhone.
iPod iPod Touch.
iPad iPad.


Los macs modernos regresan, navigator.platform == "MacIntel"pero para dar alguna "prueba de futuro" no utilices la coincidencia exacta, con suerte cambiarán a algo como MacARMo MacQuantumen el futuro.

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

Para incluir iOS que también usa el "lado izquierdo"

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


Dado que la mayoría de los sistemas operativos usan el botón de cierre a la derecha, puede mover el botón de cierre hacia la izquierda cuando el usuario está en un sistema operativo MacLike; de ​​lo contrario, no es un problema si lo coloca en el lado más común, el derecho.

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
fuente
3
@ Vitim.us muchas gracias por la respuesta detallada, realmente me salvaste el día :)
vivekkupadhyay
1
MacQuantum me alegró el día. 😂
Íhor Mé
La propiedad de la plataforma es de solo lectura, pero aún es posible suplantarla: stackoverflow.com/questions/2166540/…
Ryan Burbidge
1
@Qix Una mejora aún mejor sería reemplazar str.match(regexp) ? true : falsecon regexp.test(string). El RegExp.prototype.test()método devuelve de forma nativa un valor booleano. Por lo tanto, mi código preferido es const platformIsMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);.
Rory O'Kane
52

Es tan simple como eso:

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

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

Puedes hacer cosas divertidas y luego como:

var isMac = isMacintosh();
var isPC = !isMacintosh();
Benny Neugebauer
fuente
1
Bueno, eso cubre dos sistemas operativos. Aquí hay una lista más completa (pero posiblemente aún incompleta), que incluye Linux, BSD, Android, Palm, Sony Playstations, etc .: stackoverflow.com/questions/19877924/…
Michael Scheper
Si desea cubrir más sistemas operativos, entonces debería buscar una biblioteca como Platform.js: github.com/bestiejs/platform.js
Benny Neugebauer
@BennyNeugebauer isPCno debería ser igual a !isMacintosh();. ¿Qué pasa si el usuario está en Linux o en cualquier otra plataforma diferente? Detectará que no están en Mac y pensará que están en PC.
Mystical
@ EternalDarkness Por eso lo llamé isPC(y no isWindowso isLinux) porque Linux se ejecuta en PC, pero macOS solo se ejecuta en Mac.
Benny Neugebauer
5

¿Es esto lo que estás buscando? De lo contrario, avíseme y eliminaré esta publicación.

Pruebe este complemento de jQuery: http://archive.plugins.jquery.com/project/client-detect

Demostración: http://www.stoimen.com/jquery.client.plugin/

Esto se basa en quirksmode BrowserDetect, una envoltura para el complemento de detección de navegador / sistema operativo jQuery.

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

Y más código sobre el complemento reside aquí: http://www.stoimen.com/jquery.client.plugin/jquery.client.js

Tats_innit
fuente
2
¡TIPO! ¡Supuse mi agente de usuario y todavía me detectó en Safari para Mac! Gracias BRUV.
alternativo
1
@JacksonGariety No te preocupes bruv :)) lee más detalles aquí tiene todo el código resuelto :) stoimen.com/jquery.client.plugin/jquery.client.js Que tengas un buen brosniac :) ¡salud!
Tats_innit
@Derek hiya bruv: utiliza el complemento de navegador quirkmode y detecta el navegador / sistema operativo, consulte aquí quirksmode.org/js/detect.html y, además, consulte stoimen.com/jquery.client.plugin/jquery.client.js y quirksmode.org /js/support.html espero que esto tenga sentido bruv :)
Tats_innit
No importa, esto parece estar usando agentes de usuario ... eso apesta.
alt
1
No es realmente la respuesta que estoy buscando. ¿Es siquiera posible?
alternativo
0

Hazme saber si esto funciona. Manera de detectar un dispositivo Apple (computadoras Mac, iPhones, etc.) con la ayuda de StackOverflow.com :
¿Cuál es la lista de valores posibles para navigator.platform a partir de hoy?

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
fuente