html制作UA-CH用户代理提示_html UA Client Hints用户代理结构化【汇总】-html教程-PHP中文网

UA-CH（User-Agent Client Hints）是替代传统 navigator.userAgent 的隐私优先、结构化浏览器信息获取机制；因现代浏览器（Chrome 101+等）默认弱化 UA 字符串，丢失关键字段，故需服务端通过 Accept-CH 响应头声明所需提示，并配合 Permissions-Policy 才能在前端调用 navigator.userAgentData 安全获取结构化数据。

html制作ua-ch用户代理提示_html ua client hints用户代理结构化【汇总】

UA-CH 是什么，为什么不能直接用 `navigator.userAgent`

现代浏览器（Chrome 101+、Edge 105+、Firefox 117+）默认屏蔽或弱化 navigator.userAgent 字符串，返回精简值（如 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36），丢失设备型号、CPU 架构、系统版本等关键信息。UA-CH（User-Agent Client Hints）是替代方案：它把用户代理拆成结构化字段，按需请求，更隐私、更可靠。

但注意：它不是“开箱即用”，必须显式发起请求，且受同源策略和权限控制限制。

如何在 HTML 中触发 UA-CH 请求（`Accept-CH` 响应头）

仅靠前端 JS 调用 navigator.userAgentData.getHighEntropyValues() 不会自动获取高熵字段（如 model、platformVersion），必须先由服务端在 HTTP 响应中带上 Accept-CH 头，告诉浏览器“我需要这些提示”。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

Accept-CH: Sec-CH-UA, Sec-CH-UA-Platform, Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform-Version
必须配合 Permissions-Policy: ch-ua=*, ch-ua-platform=*, ch-ua-mobile=*, ch-ua-model=*, ch-ua-platform-version=*（否则 Chrome 会拒绝提供）
只对安全上下文（HTTPS 或 localhost）生效；HTTP 站点完全不可用
响应头需在 HTML 文档的初始响应中设置（不能靠 JS 后续追加）

前端 JS 怎么读取 UA-CH 数据（`navigator.userAgentData`）

服务端配好 Accept-CH 后，前端才能调用 navigator.userAgentData 安全读取。注意：高熵字段（如 model）需显式请求，且返回 Promise。

if ('userAgentData' in navigator) {
  navigator.userAgentData.getHighEntropyValues([
    'model', 'platformVersion', 'architecture', 'mobile'
  ]).then(ua => {
    console.log('Model:', ua.model); // 可能是 'iPhone', 'Pixel 7'
    console.log('Platform version:', ua.platformVersion); // 如 '16.5'
  });
}

低熵字段（brand, version, mobile）可直接同步访问：navigator.userAgentData.brands
getHighEntropyValues() 每次调用都可能触发用户提示（尤其首次），不要频繁轮询
返回值字段名严格区分大小写：platformVersion ≠ platform_version
某些字段在桌面端始终为空（如 model），别硬依赖

常见错误与兼容性兜底怎么做

直接上 UA-CH 会导致 Safari（不支持）、旧版 Chrome（

永远先检查 'userAgentData' in navigator，再判断 navigator.userAgentData?.getHighEntropyValues 是否存在
不要用 navigator.userAgent 解析设备类型——它已被刻意模糊，Android 可能不出现，iPhone 可能被抹掉
推荐组合策略：userAgentData → fallback 到 screen.width + maxTouchPoints + matchMedia('(hover: hover)') 推断设备类型
服务端 UA 解析（如 Node.js 的 ua-parser-js）仍可作为辅助，但要清楚它已不可靠，仅用于粗略分类