client hints 提供 dpr、width、viewport-width、device-memory、downlink、rtt、sec-ch-ua-model、sec-ch-ua-platform 等标准化客户端信号，用于服务端资源适配，但无法获取 cpu/gpu 型号等精确硬件信息。
Client Hints 本身不能直接获取用户硬件信息（如 CPU 型号、GPU 型号、内存大小、硬盘容量等），它只提供由浏览器主动、安全地暴露的、与网络请求和设备能力相关的有限客户端特征信号。这些信号可用于资源适配（如图片尺寸、格式、脚本复杂度），但不是“硬件探测工具”。
Client Hints 能提供哪些与设备/环境相关的关键信息？
浏览器在发起请求时，可通过请求头（Request Headers）发送以下标准化 Client Hints（需服务端显式开启并声明接受）：
-
DPR：设备像素比（如 1.0、2.0、3.0），反映屏幕清晰度，用于响应式图片缩放 -
Width和Viewport-Width：CSS 像素宽度（Width是资源渲染所需宽度，Viewport-Width是视口宽度），用于选择合适尺寸的图片或布局 -
Device-Memory：设备内存等级（如 0.25、0.5、1、2、4、8 GB），粗略反映设备性能，可用来决定是否加载轻量版 JS 或简化动画 -
Downlink：有效下行带宽（Mbps），反映当前网络速度，用于切换图片格式（如 WebP/AVIF）或视频码率 -
RTT：往返延迟（ms），辅助判断网络质量 -
Sec-CH-UA-Model：设备型号（如 "iPhone", "SM-S901B"），需用户授权且仅在安全上下文（HTTPS）中启用，兼容性有限 -
Sec-CH-UA-Platform：操作系统平台（如 "Android", "Windows", "macOS"）
如何在 HTML5 中启用并使用 Client Hints？
分三步：声明接受 → 触发发送 → 服务端响应适配
-
在 HTML 中通过
<meta>声明需要的 hints（推荐方式）：
-
或通过 HTTP 响应头全局启用：
Accept-CH: DPR, Width, Viewport-Width, Device-Memory, Downlink, Sec-CH-UA-Platform -
服务端需读取请求头，并据此返回适配资源：例如 Nginx 可用
$http_dpr变量，Node.js Express 中用req.get('DPR')；再结合 CDN（如 Cloudflare、Vercel）的边缘逻辑做格式/尺寸路由
典型资源适配场景示例
不依赖 JavaScript，纯服务端决策即可提升体验：
-
图片自动适配：根据
DPR=2+Width=400→ 返回 800px 宽的 @2x WebP 图；Downlink → 降级为 JPEG 并压缩至 60% -
脚本分级加载：
Device-Memory → 返回精简版 <code>app-lite.js（无 Lottie、无复杂图表库） -
UI 组件简化：
Sec-CH-UA-Platform="Android"且Device-Memory=0.5→ 后端渲染时隐藏折叠面板、禁用交互动画
重要限制与注意事项
- Client Hints 默认不发送**，必须显式声明（
Accept-CH）并满足安全上下文（HTTPS） -
Sec-CH-UA-*系列（含 Model、Mobile）受用户隐私策略限制，Chrome 中默认仅对高信任站点（如已添加到主屏幕）或用户交互后才发送 - 无法获取精确硬件参数：没有 API 能告诉你“这台 Mac 是 M1 还是 Intel”，也不能知道“GPU 支持 Vulkan 吗”
- 不要替代响应式设计：Client Hints 是增强手段，
srcset、picture、CSS 媒体查询仍是基础
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
