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

Best way to detect Mac OS X or Windows computers with JavaScript or jQuery

提问by alt

So I'm trying to move a "close" button to the left side when the user is on Mac and the right side when the user is on PC. Now I'm doing it by examining the user agent, but it can be too easily spoofed for reliable OS detection. Is there a surefire way to detect whether the OS on which the browser is running is Mac OS X or Windows? If not, what's better than user agent sniffing?

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

回答by Vitim.us

The window.navigator.platformproperty is not spoofed when the userAgent string is changed. I tested on my Mac if I change the userAgent to iPhone or Chrome Windows, navigator.platformremains MacIntel.

该window.navigator.platform时的userAgent字符串改变没有欺骗性质。如果我将 userAgent 更改为 iPhone 或 Chrome Windows，我在 Mac 上进行了测试，navigator.platform仍然是 MacIntel。

The property is also read-only

该属性也是只读的

---

---

I could came up with the following table

我可以想出下表

Mac Computers

Mac68KMacintosh 68K system.
MacPPCMacintosh PowerPC system.
MacIntelMacintosh Intel system.

iOS Devices

iPhoneiPhone.
iPodiPod Touch.
iPadiPad.

Mac电脑

Mac68K麦金塔 68K 系统。
MacPPCMacintosh PowerPC 系统。
MacIntel麦金塔英特尔系统。

iOS 设备

iPhone苹果手机。
iPodiPod 触摸。
iPadiPad。

---

---

Modern macs returns navigator.platform == "MacIntel"but to give some "future proof" don't use exact matching, hopefully they will change to something like MacARMor MacQuantumin future.

现代 macs 回归，navigator.platform == "MacIntel"但为了提供一些“未来证明”，不要使用精确匹配，希望它们会变成类似MacARM或MacQuantum将来的东西。

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

To include iOS that also use the "left side"

包含也使用“左侧”的 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>

---

---

Since most O.S. use the close button on the right, you can just move the close button to the left when the user is on a MacLike O.S., otherwise isn't a problem if you put it on the most common side, the right.

由于大多数操作系统使用右侧的关闭按钮，因此当用户使用 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/

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

回答by Benny Neugebauer

It's as simple as that:

就这么简单：

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

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

You can do funny things then like:

你可以做一些有趣的事情，比如：

var isMac = isMacintosh();
var isPC = !isMacintosh();

回答by Tats_innit

Is this what you are looking for? Otherwise, let me know and I will remove this post.

这是你想要的？否则，请告诉我，我将删除此帖子。

Try this jQuery plugin: http://archive.plugins.jquery.com/project/client-detect

试试这个 jQuery 插件：http: //archive.plugins.jquery.com/project/client-detect

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

演示：http : //www.stoimen.com/jquery.client.plugin/

This is based on quirksmode BrowserDetect a wrap for jQuery browser/os detection plugin.

这是基于 quirksmode BrowserDetect 一个 jQuery 浏览器/操作系统检测插件的包装。

For keen readers:
http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www.quirksmode.org/js/support.html

对于敏锐的读者：
http: //www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
http://www.quirksmode.org/js/support.html

And more code around the plugin resides here: http://www.stoimen.com/jquery.client.plugin/jquery.client.js

围绕插件的更多代码位于此处：http: //www.stoimen.com/jquery.client.plugin/jquery.client.js

回答by risingPhoenix1979

Let me know if this works. Way to detect an Apple device (Mac computers, iPhones, etc.) with help from StackOverflow.com:
What is the list of possible values for navigator.platform as of today?

让我知道这个是否奏效。在StackOverflow.com 的帮助下检测 Apple 设备（Mac 计算机、iPhone 等）的方法：
截至今天，navigator.platform 的可能值列表是什么？

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
}