"Client Hints 实战：DPR/Width/Viewport-Width 与图片自适应"

概述Client Hints 通过请求头向服务端传递设备与视口特征，支持服务端按 `DPR/Width/Viewport-Width` 选择最合适的资源（类似 `srcset/sizes` 的服务器端版本），减少带宽并提升体验。关键提示与协作`Accept-CH`：服务端通过响应宣告接收特定提示（如 `DPR`）；浏览器后续请求才会携带相关提示头［参考3］。`DPR`、`Width`、`Viewport-Width`：分别表示屏幕像素比、图片布局宽度与视口宽度；用于选择图像裁切与分辨率［参考1,2,3］。`Content-DPR`：当使用 `DPR` 选择图像时，响应必须包含 `Content-DPR`，客户端据此确定内在尺寸与缩放［参考5］。实践建议选择图片裁切与分辨率：先依据 `Viewport-Width` 判断艺术指导（不同构图），再依据 `Width/DPR` 选择具体资源。结合 `Save-Data` 降低弱网下资源体积；注意浏览器支持与头部命名演进（`Sec-CH-DPR`等）［参考3,5］。参考与验证［参考1］web.dev：Client Hints 背景与用法（DPR/Width/Viewport-Width）：https://web.dev/articles/performance-optimizing-content-efficiency-client-hints［参考2］caniuse：Client Hints 支持概览（DPR/Width/Viewport-Width）：https://caniuse.com/client-hints-dpr-width-viewport［参考3］MDN：`DPR` 请求头与 `Accept-CH` 说明（替代为 `Sec-CH-DPR` 的演进）：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DPR［参考4］MDN：`DPR` 文档（注意已从早期规范移除，改用 `Sec-CH-DPR`）：https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/DPR［参考5］MDN：`Content-DPR` 响应头与布局说明：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-DPR关键词校验关键词聚焦 Client Hints 与图片自适应，与正文一致。