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

bmp9r5qi 于 2023-10-17 发布在 jQuery

关注(0)|答案(8)|浏览(116)

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

jquery

来源：https://stackoverflow.com/questions/10527983/best-way-to-detect-mac-os-x-or-windows-computers-with-javascript-or-jquery

8条答案

按热度按时间

ego6inou1#

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

该属性也是 * 只读 *

我可以得出下表

Mac电脑

Mac68KMacintosh 68K系统。
MacPPCMacintosh PowerPC系统。
MacIntelMacintosh Intel系统。
MacIntelApple Silicon（ARM）

iOS设备

iPhoneiPhone.
iPodiPod Touch。
iPadiPad。
现代mac返回navigator.platform == "MacIntel"，但为了给予一些“未来的证明”，不要使用精确匹配，希望它们将来会变成像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/

赞(0）回复(0）举报 2023-10-17

3zwtqj6y2#

就这么简单：

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

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

赞(0）回复(0）举报 2023-10-17

b91juud33#

你可以测试一下：

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>

赞(0）回复(0）举报 2023-10-17

6tdlim6h4#

完成：Some browsers支持navigator.userAgentData.platform，这是一个只读属性。

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

请注意，Navigator.platformis deprecated。

赞(0）回复(0）举报 2023-10-17

rbpvctlc5#

正如前面的回答中提到的，navigator.platform已被弃用。我们应该使用navigator.userAgentData，但它仍然缺乏支持（Firefox，Safari在2022年不支持它）。
注意navigator.userAgentData只在兼容的浏览器上通过https工作。
这里有一个脚本，它将使用UserAgentData，但使用旧的方法。

function get_platform() {
    // 2022 way of detecting. Note : this userAgentData feature is available only in secure contexts (HTTPS)
    if (typeof navigator.userAgentData !== 'undefined' && navigator.userAgentData != null) {
        return navigator.userAgentData.platform;
    }
    // Deprecated but still works for most of the browser
    if (typeof navigator.platform !== 'undefined') {
        if (typeof navigator.userAgent !== 'undefined' && /android/.test(navigator.userAgent.toLowerCase())) {
            // android device’s navigator.platform is often set as 'linux', so let’s use userAgent for them
            return 'android';
        }
        return navigator.platform;
    }
    return 'unknown';
}

let platform = get_platform().toLowerCase();

let isOSX = /mac/.test(platform); // Mac desktop
let isIOS = ['iphone', 'ipad', 'ipod'].indexOf(platform) >= 0; // Mac iOs
let isApple = isOSX || isIOS; // Apple device (desktop or iOS)
let isWindows = /win/.test(platform); // Windows
let isAndroid = /android/.test(platform); // Android
let isLinux = /linux/.test(platform); // Linux

赞(0）回复(0）举报 2023-10-17

drnojrws6#

这就是你要找的东西吗？否则，让我知道，我会删除这篇文章。
试试这个jQuery plugin：http://archive.plugins.jquery.com/project/client-detect

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

这是一个基于quirksmode BrowserDetect的jQuery browser/os检测插件。
对于敏锐的读者：
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/jquery.client.plugin/jquery.client.js

赞(0）回复(0）举报 2023-10-17

xqnpmsa87#

如果成功了告诉我。在StackOverflow.com的帮助下检测Apple设备（Mac电脑，iPhone等）的方法：
What is the list of possible values for navigator.platform as of today?

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
}

赞(0）回复(0）举报 2023-10-17

mznpcxlj8#

我认为所有Chrome或基于Chrome的浏览器都会在macOS平台上返回MacIntel，而不管硬件架构如何。
Check the Chromium Source code for further details.

赞(0）回复(0）举报 2023-10-17