JavaScript 应通过 navigator.userAgentData.getHighEntropyValues() 异步获取 Client Hints，需提前用 声明字段，配合服务端协同识别并降级至 UA 解析。
直接用 JavaScript 异步获取 Client Hints，比解析原始 UA 字符串更可靠、更结构化，也更符合现代浏览器的隐私策略。关键在于：不能只依赖 navigator.userAgent，而要主动请求并等待高熵提示就绪。
一、先声明需要哪些提示字段
浏览器默认不发送敏感设备信息（如设备型号、平台版本），必须显式声明。最常用的方式是在 HTML 的 中添加 <meta> 标签：
<meta http-equiv="Accept-CH" content="Sec-CH-UA-Full-Version, Sec-CH-UA-Platform, Sec-CH-UA-Model, Sec-CH-UA-Arch, Sec-CH-UA-Platform-Version">- 如果只需要基础信息（如浏览器品牌和是否为移动设备），可用简写：
content="Sec-CH-UA, Sec-CH-UA-Mobile" - 注意：该声明需在页面首次加载时即存在，动态插入无效
二、用 navigator.userAgentData 异步读取
原始 navigator.userAgent 已被大幅简化（例如 Android 设备可能只返回 Mozilla/5.0 (Linux; U; Android) AppleWebKit/537.36），而 navigator.userAgentData 提供了结构化接口，但需异步调用 getHighEntropyValues()：
- 它返回一个 Promise，必须传入明确的键数组，如
['model', 'platformVersion', 'architecture'] - 首次调用可能触发用户权限提示（尤其在桌面 Chrome/Edge），后续调用会缓存结果
- 示例代码：
三、配合服务端做精准识别与降级兜底
前端获取只是第一步，真实场景中往往需要和服务端协同：
- 前端可通过
fetch携带自定义 header 发送 hints 数据（如X-UA-Model: Pixel 7），供后端做设备分发或风控 - 服务端也可通过 HTTP 请求头（如
Sec-CH-UA-Model）直接读取，但需提前配置Accept-CH响应头并设置Vary - 务必保留降级逻辑：当
userAgentData不可用或 Promise 拒绝时，再 fallback 到传统 UA 解析（例如用正则提取Chrome/或iOS）
四、注意兼容性与权限边界
不是所有字段在所有环境下都可访问：
- 高熵字段（如
model,platformVersion）在隐身模式或低信任上下文中可能返回空字符串或抛出异常 - Chrome 和 Edge 支持完整 UA-CH，Firefox 目前仅支持部分低熵提示（如
Sec-CH-UA），Safari 尚未实现 - 移动端 WebView（如 iOS WKWebView）通常不支持
getHighEntropyValues，需单独判断环境
