Meilleur moyen de détecter les ordinateurs Mac OS X ou Windows avec JavaScript ou jQuery

Question

J'essaie donc de déplacer un bouton "fermer" sur le côté gauche lorsque l'utilisateur est sur Mac et sur le côté droit lorsque l'utilisateur est sur PC. Pour l'instant, je le fais en examinant l'agent utilisateur, mais celui-ci peut être trop facilement usurpé pour permettre une détection fiable du système d'exploitation. Existe-t-il un moyen infaillible de détecter si le système d'exploitation sur lequel le navigateur fonctionne est Mac OS X ou Windows ? Sinon, qu'y a-t-il de mieux que de renifler l'agent utilisateur ?

Answer 1

El plateforme.de.navigation.de.la.fenêtre n'est pas usurpée lorsque la chaîne userAgent est modifiée. J'ai testé sur mon Mac si je change le userAgent en iPhone ou Chrome Windows, plateforme.de.navigation reste MacIntel.

La propriété est également en lecture seule

---

J'ai pu obtenir le tableau suivant

Ordinateurs Mac

Mac68K Système Macintosh 68K.
MacPPC Système Macintosh PowerPC.
MacIntel Système Macintosh Intel.

Appareils iOS

iPhone iPhone.
iPod iPod Touch.
iPad iPad.

---

Retour des macs modernes navigator.platform == "MacIntel" mais pour éviter tout risque d'erreur, n'utilisez pas la correspondance exacte, nous espérons qu'elle sera modifiée pour devenir quelque chose comme MacARM o MacQuantum à l'avenir.

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

Pour inclure les iOS qui utilisent aussi le "côté gauche".

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

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

var is_Mac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
var is_iPhone = navigator.platform == "iPhone";
var is_iPod = navigator.platform == "iPod";
var is_iPad = navigator.platform == "iPad";

/* Output */
var out = document.getElementById('out');
if (!is_OSX) out.innerHTML += "This NOT a Mac or an iOS Device!";
if (is_Mac) out.innerHTML += "This is a Mac Computer!\n";
if (is_iOS) out.innerHTML += "You're using an iOS Device!\n";
if (is_iPhone) out.innerHTML += "This is an iPhone!";
if (is_iPod) out.innerHTML += "This is an iPod Touch!";
if (is_iPad) out.innerHTML += "This is an iPad!";
out.innerHTML += "\nPlatform: " + navigator.platform;

<pre id="out"></pre>

---

Puisque la plupart des O.S. utilisent le bouton de fermeture à droite, vous pouvez simplement déplacer le bouton de fermeture à gauche lorsque l'utilisateur est sur un O.S. MacLike, sinon ce n'est pas un problème si vous le mettez sur le côté le plus commun, la droite.

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/

Answer 2

C'est aussi simple que cela :

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

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

Answer 3

Vous pouvez le tester :

function getOS() {
  let userAgent = window.navigator.userAgent.toLowerCase(),
    macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
    windowsPlatforms = /(win32|win64|windows|wince)/i,
    iosPlatforms = /(iphone|ipad|ipod)/i,
    os = null;

  if (macosPlatforms.test(userAgent)) {
    os = "macos";
  } else if (iosPlatforms.test(userAgent)) {
    os = "ios";
  } else if (windowsPlatforms.test(userAgent)) {
    os = "windows";
  } else if (/android/.test(userAgent)) {
    os = "android";
  } else if (!os && /linux/.test(userAgent)) {
    os = "linux";
  }

  return os;
}

document.getElementById('your-os').textContent = getOS();

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
        <h1 id="your-os"></h1>
  </body>
</html>

Answer 4

Est-ce que c'est ce que vous cherchez ? Sinon, faites-le moi savoir et je supprimerai cet article.

Essayez ce plugin jQuery : http://archive.plugins.jquery.com/project/client-detect

Démonstration : http://www.stoimen.com/jquery.client.plugin/

Ceci est basé sur quirksmode BrowserDetect un wrap pour jQuery browser/os detection plugin.

Pour les lecteurs assidus :
http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www.quirksmode.org/js/support.html

Et plus de code autour du plugin se trouve ici : http://www.stoimen.com/jquery.client.plugin/jquery.client.js

Answer 5

Pour l'achèvement : Certains navigateurs soutien navigator.userAgentData.platform qui est une propriété en lecture seule.

console.log(navigator.userAgentData.platform);
// macOs

Veuillez noter que Navigator.platform est déprécié .