首页 > 解决方案 > 如何在没有 navigator.platform 的情况下确定浏览器平台

问题描述

虽然之前我们能够使用navigator.platform它来检查浏览器在哪个操作系统中运行(这对于诸如键事件翻译之类的事情仍然是必要的,例如Homevs. metaKey+ArrowLeft,或者以遵循操作系统约定的方式放置虚拟模式“关闭”图标)该选项不再存在。(也就是说,现在它在技术上仍然有效,但它不再是在您部署代码时保证可以工作的解决方案)。

如果需要操作系统知识,我似乎找不到任何关于替换应该是什么的官方文档:确定网页运行在哪个操作系统/平台上的新改进方法是什么?

(目前最流行的 SO 问题,“使用 JavaScript 或 jQuery 检测 Mac OS X 或 Windows 计算机的最佳方法”,自决定弃用以来没有任何已编辑的答案navigator.platform,因此很遗憾在此时此刻)

标签: javascripthtml

解决方案


一种选择是navigator.userAgentData与该.getHighEntropyValues()方法一起使用。然后我们可以利用User-Agent Client Hints APIuserAgentData并通过请求一些提示来获取高熵值。navigator.platform不再提供从用户代理信息中检测操作系统的方法。

或者只是访问navigator.userAgent具有完全支持并为可以从中提取操作系统的当前浏览器提供用户代理字符串。

function checkOS(n) {
  if (n.userAgentData) {
    const hints = ["architecture", "model", "platform", "platformVersion", "uaFullVersion"];
    n.userAgentData.getHighEntropyValues(hints)
      .then(ua => {
        console.log(ua);
      });
  } else {
    console.log(n.userAgent);
    return "navigator.userAgentData is not supported!";
  }
}

checkOS(navigator);

这是我在 DevTools“问题”选项卡中找到的唯一文档,除了关于 user agent string reduction 的更新信息。

navigator.userAgent页面或脚本正在访问、navigator.appVersion和中的至少一个navigator.platform。在 Chrome 的未来版本中,用户代理字符串中可用的信息量将减少。- 要解决此问题,请将 、 和 的使用替换为navigator.userAgent特征navigator.appVersion检测navigator.platform、渐进增强或迁移到navigator.userAgentData.

我尝试使用 Chrome 登录navigator.userAgentData到 Windows 和 macOS 机器上的控制台,以查看它包含哪些类型的数据,并且该对象确实具有一些有用的信息getHighEntropyValues(),尤其是方法。

// NavigatorUAData {brands: Array(3), mobile: true}
{
  "brands": [
    {
      "brand": "Chromium",
      "version": "92"
    },
    {
      "brand": " Not A;Brand",
      "version": "99"
    },
    {
      "brand": "Google Chrome",
      "version": "92"
    }
  ],
  "mobile": false,
  "getHighEntropyValues": function getHighEntropyValues() { [native code] }
}

浏览器的支持不是navigator.userAgentData很好(仅在 Chrome、Edge、Opera 中支持),但这可能是朝着检测操作系统的正确方向迈出的一步,userAgentData因为navigator.platform不再是。CodePen 演示


推荐阅读