无法使用JS检测底层操作系统

Question

当我看到浏览器的控制台时，即使我使用的是 Windows，它也会返回 Linux。

function detectOS() {
    const userAgent = navigator.userAgent.toLowerCase();

    if (userAgent.includes('win')) {
        return 'Windows';
    } else if (userAgent.includes('mac')) {
        return 'Mac';
    } else if (userAgent.includes('linux')) {
        return 'Linux';
    } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
        return 'iOS';
    } else if (userAgent.includes('android')) {
        return 'Android';
    }
  
    return 'Unknown OS';
}
console.log(detectOS());

代码或我的控制台有任何问题吗？

我尝试使用其他浏览器和电脑，但不起作用！！！

Answer 1

您应该使用

navigator.platform

而不是

navigator.userAgent

。您可以在 MDN Web 文档

中了解更多信息

请注意，此功能已被弃用，不再推荐

function detectOS() {
        const userAgent = navigator.platform.toLowerCase();

        if (userAgent.includes('win')) {
            return 'Windows';
        } else if (userAgent.includes('mac')) {
            return 'Mac';
        } else if (userAgent.includes('linux')) {
            return 'Linux';
        }
      
        return 'Unknown OS';
    }

希望这能解决您的问题！

Answer 2

您的代码应该适用于大多数情况。但是，在某些情况下，某些浏览器或浏览器扩展可能会修改用户代理字符串，从而导致返回不正确的信息。因此它们可能不是万无一失的方法。¹此外，如果您使用虚拟机，可能会导致用户代理报告主机操作系统而不是来宾操作系统。

既然您提到

navigator.platform

适合您，但它已被 弃用，您可以考虑使用另一个属性，

navigator.userAgentData.platform.

²

正如JaromandaX在评论中指出的那样，您应该检查Linux作为最后一个条件，因为Android是一个基于Linux的操作系统，因此可能会出现一些冲突。

可靠地检查平台信息并非易事；因此，如果您被允许使用一个库，我建议您使用一个可以为您处理此问题的库。 Platform.js是一个综合性库，可以帮助您实现这一目标。³

function detectOS() {
  // if a browser has no support for navigator.userAgentData.platform use platform as fallback
  const userAgent = (navigator.userAgentData.platform ?? navigator.platform).toLowerCase();

  if (userAgent.includes('win')) {
    return 'Windows';
  } else if (userAgent.includes('android')) {
    return 'Android';
  } else if (userAgent.includes('mac')) {
    return 'Mac';
  } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
    return 'iOS';
  } else if (userAgent.includes('linux')) {
    return 'Linux';
  }
  return 'Unknown OS';
}

console.log(detectOS());

---

¹为什么

navigator.userAgent

和

navigator.platform

都不是万无一失的？

下面是一个使用

navigator.platform

修改

platform

属性的小脚本。

const codeToInject = `
  Object.defineProperty(navigator, "platform", {
    get: () => "MacIntel",
    set: (a) => {}
  });
`;
const script = document.createElement('script');
script.textContent = codeToInject;
(document.head || document.documentElement).appendChild(script);
script.remove();

console.log(navigator.platform); // will always return MacIntel
// For your case it will always print Mac which proves that it can be modified.

²检查浏览器支持

由于

navigator.userAgentData

是实验性的，因此检查其 浏览器支持 至关重要。

³使用platform.js检测操作系统：

以下是根据您的需求使用platform.js的方法。

function detectOS() {
  const os = platform.os.family;

  if (os === 'Windows') {
    return 'Windows';
  } else if (os === 'OS X' || os === 'macOS') {
    return 'Mac';
  } else if (os === 'iOS') {
    return 'iOS';
  } else if (os === 'Android') {
    return 'Android';
  } else if (os === 'Linux') {
    return 'Linux';
  }

  return 'Unknown OS';
}

console.log(detectOS());

<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.6/platform.min.js"></script>