client hints 是由服务端通过 accept-ch 和 vary 响应头协商开启的 http 请求头，浏览器仅在 https 下且收到许可后才发送；html 中的 仅为 chromium 特有补丁，作用有限且不跨浏览器。
Client Hints 不是 HTML 能“创建”的东西，它本质是 HTTP 请求头（Request Headers），由浏览器在发起请求时自动携带，前提是服务端明确请求过、且用户代理支持。HTML 本身无法生成或控制这些头，但可以通过 <meta> 标签触发部分 Hint 的启用（仅限 Chromium 系浏览器，且有严格限制）。
怎么让浏览器发送 Client Hints（关键第一步）
必须由服务端在响应中返回 Vary 和 Accept-CH 响应头，浏览器才会在后续请求中附带对应 Hint。HTML 文件里写再多 <meta> 都不会生效，除非服务端已开启许可。
-
Accept-CH值示例：Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-Viewport-Width - 必须同时设置
Vary: Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-Viewport-Width，否则 CDN 或缓存可能混用响应 - 只对 HTTPS 页面生效；HTTP 下 Chromium 会忽略
Accept-CH - 首次访问页面时，浏览器尚无 Hint 可发，需二次请求才携带（除非配合
<meta http-equiv="Accept-CH" content="...">，但仅限部分 Hint 且仅 Chromium 支持）
<meta http-equiv="Accept-CH"> 能做什么、不能做什么
这个标签是 Chromium 特有的兼容性补丁，仅用于在没有服务端响应头时，尝试在 HTML 解析阶段提示浏览器启用某些 Hint。但它不改变协议规范，也不被 Safari/Firefox 支持。
- 仅支持有限字段：
Sec-CH-UA、Sec-CH-UA-Mobile、Sec-CH-UA-Platform、Sec-CH-Viewport-Width、Sec-CH-DPR - 必须放在
中靠前位置（最好在<title></title>后立即出现），否则可能被忽略 - 即使写了，也只影响该 HTML 文档后续发起的子资源请求（如图片、CSS、JS），不影响当前 HTML 的请求本身
- 示例写法：
<meta http-equiv="Accept-CH" content="Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-Viewport-Width">
服务端怎么读取和使用 Client Hints
Client Hints 是标准 HTTP 请求头，服务端框架按常规方式读取即可，但要注意字段名含短横线、大小写不敏感、且部分 Hint 有结构化格式（如 Sec-CH-UA 是 JSON-like 字符串）。
- Node.js（Express）示例：
req.get('Sec-CH-UA')返回类似"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Google Chrome\";v=\"120\"" - PHP 示例：
$_SERVER['HTTP_SEC_CH_UA']（注意下划线替换短横线） -
Sec-CH-Viewport-Width是纯数字（单位 px），可直接用于响应式图片<img srcset="...">的服务端选图逻辑 - 不要依赖
Sec-CH-UA-Mobile: ?1判定移动设备——它只是 UA 提示，不是可靠设备检测依据；应结合Sec-CH-Viewport-Width或真实 CSS 媒体查询
常见失效原因和调试方法
Client Hints 容易看似配置了却没生效，根本原因常在链路环节缺失或错配。
- 用
curl -I https://yoursite.com检查响应头是否真包含Accept-CH和对应Vary - 打开 Chrome DevTools → Network → 刷页面 → 点开任意请求 → Headers → Request Headers → 查看是否有
sec-ch-ua等字段（注意小写） - 如果用了 CDN（如 Cloudflare），确认它未过滤或覆盖
Accept-CH/Vary头；部分 CDN 默认 strip 自定义响应头 -
Sec-CH-UA类 Hint 在隐身模式或禁用 UA 模拟时可能为空或简化，不代表线上用户行为 - 服务端读取后未做缓存键分离（比如用
Sec-CH-Viewport-Width选图，但缓存 key 没包含该值），会导致不同设备拿到相同尺寸资源
Client Hints 的核心约束始终是：它由服务端协商开启、浏览器有条件发送、服务端必须参与缓存与响应决策。把它当成“HTML 加个 meta 就能自适应”的方案，一定会掉进缓存错乱、Hint 缺失、跨浏览器不一致的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
