使用 JavaScript 或 jQuery 检测 Mac OS X 或 Windows 计算机的最佳方法

Question

因此，我试图在用户使用 Mac 时将“关闭”按钮移至左侧，而当用户使用 PC 时将其移至右侧。现在我通过检查用户代理来做到这一点，但是对于可靠的操作系统检测来说，它很容易被欺骗。有没有一种可靠的方法来检测运行浏览器的操作系统是 Mac OS X 还是 Windows？如果不是，有什么比用户代理嗅探更好的呢？

原文由 alt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当更改 userAgent 字符串时， window.navigator.platform 属性不会被欺骗。如果我将 userAgent 更改为 iPhone 或 Chrome Windows，我在我的 Mac 上进行了测试， navigator.platform 仍然是 MacIntel。

该属性也是 只读的

---

我可以想出下表

苹果电脑

Mac68K Macintosh 68K系统。

MacPPC Macintosh PowerPC 系统。

MacIntel Macintosh 英特尔系统。

MacIntel 苹果硅（ARM）

iOS 设备

iPhone iPhone。

iPod iPod Touch。

iPad iPad。

---

现代 macs 返回 navigator.platform == "MacIntel" 但为了提供一些“未来证明”，不要使用精确匹配，希望它们会在 future.d 中更改为 MacARM 或 MacQuantum

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

包括也使用“左侧”的 iOS

 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>

---

由于大多数操作系统使用右侧的关闭按钮，因此当用户使用 MacLike 操作系统时，您只需将关闭按钮移到左侧即可，否则，如果将其放在最常见的一侧，即右侧，则没有问题。

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就这么简单：

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

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

原文由 Benny Neugebauer 发布，翻译遵循 CC BY-SA 4.0 许可协议