如何不依赖navigator.platform检测浏览器运行的平台操作系统

首选标准方案：使用 navigator.userAgentData（UA Client Hints） #

这是W3C推出的替代原有UA字符串、navigator.platform等废弃接口的标准能力，专门用于合规获取用户代理相关的平台、浏览器信息，目前已经得到主流Chromium系浏览器的正式支持。

基础使用方式非常简单，直接读取platform属性即可获取操作系统标识：

// 常用系统检测示例
const platform = navigator.userAgentData.platform;
const isMacOS = platform === 'macOS';
const isWindows = platform === 'Windows';
const isAndroid = platform === 'Android';
const isIOS = platform === 'iOS';

如果需要获取操作系统版本等更详细的信息，可以调用getHighEntropyValues方法申请高熵信息：

// 获取系统版本等详细信息示例
navigator.userAgentData.getHighEntropyValues(['platformVersion', 'architecture'])
  .then(uaInfo => {
    // 输出示例：macOS 13.5.1 arm64
    console.log(`${uaInfo.platform} ${uaInfo.platformVersion} ${uaInfo.architecture}`);
  });

兼容降级方案 #

针对暂未支持navigator.userAgentData的浏览器（如Safari、Firefox的部分旧版本），可以做两层降级兼容：

• 第一层降级：读取navigator.platform属性。虽然该接口已被标记废弃，但目前所有主流浏览器仍保留支持，且各大浏览器厂商公开的移除时间表显示，至少3年内不会完全下线该能力，完全可以作为临时兼容方案使用
• 第二层降级：解析navigator.userAgent字符串中的系统标识。注意UA字符串目前也在逐步冻结缩减，仅建议作为最后的兜底方案使用

场景优化提示 #

对于你提到的键位适配、UI规范适配等场景，还可以结合实际需求减少对系统检测的依赖：

• 快捷键判断场景：键盘事件自带ctrlKey、metaKey等修饰键属性，不同系统下会自动对应正确的按键逻辑，仅当需要在界面上展示快捷键提示（如显示⌘还是Ctrl）时才需要检测系统
• 模态框关闭按钮位置适配：如果是通用性较强的组件，也可以提供手动配置项，允许业务方根据目标用户群体调整，无需强制依赖系统检测

内容的提问来源于stack exchange，提问作者Mike 'Pomax' Kamermans