HTTP Client Hints：视口与像素密度驱动的资源自适应

---

title: HTTP Client Hints：视口与像素密度驱动的资源自适应

keywords:

• Client Hints
• Accept-CH
• DPR
• Width
• Viewport-Width
• UA-CH

description: 介绍 Client Hints 的头部与信号（DPR/Width/Viewport-Width 等），如何按设备能力与视口选择资源（图片）并与缓存策略协作，提供示例与参考。

categories:

• 应用软件
• 下载工具

---

概述

Client Hints 允许服务器基于客户端提供的信号（如 DPR/Width/Viewport-Width）选择更合适的资源变体。通过 Accept-CH 与响应头启用提示，并结合缓存键管理不同变体。

示例：启用与使用

Accept-CH: DPR, Width, Viewport-Width
Vary: DPR, Width, Viewport-Width

location /img/ {
  add_header Vary "DPR, Width, Viewport-Width" always;
}

工程建议

• 缓存与变体：为不同提示值设置 Vary，避免缓存混淆；控制变体数量。
• 图片服务：结合服务器/CDN 动态裁剪与压缩；与 srcset/sizes 协作。
• UA-CH：谨慎使用用户代理类提示；遵循隐私边界与最小化原则。

参考与验证

• IETF RFC 8942 Client Hints：https://www.rfc-editor.org/rfc/rfc8942
• MDN Client Hints 文档：https://developer.mozilla.org/docs/Web/HTTP/Client_hints
• web.dev 指南：https://web.dev/articles/client-hints