如何利用 Nginx 缓存适配不同的客户端设备-Nginx-PHP中文网

核心是用map将ua归一化为mobile/weapp/tablet/desktop四类稳定标识，再通过proxy_cache_key包含$device_type、add_header x-device-type $device_type和vary x-device-type实现多端缓存隔离，避免缓存污染。

如何利用 nginx 缓存适配不同的客户端设备

Nginx 适配不同客户端设备的核心不是“识别后跳转”，而是让缓存系统能区分并分别存储 PC、移动端、小程序等返回的内容，避免一个设备的响应被另一个设备错误复用（即缓存污染）。关键不在 UA 判断本身，而在如何让这个判断结果参与缓存决策。

用 map 归类 User-Agent，生成稳定设备标识

User-Agent 字符串太长、变体太多，直接拿它做缓存依据会极大降低命中率。正确做法是用 map 指令把它压缩成几个确定值：

map $http_user_agent $device_type {
    ~*"(iPhone|Android|Mobile|BlackBerry|Opera Mini)" "mobile";
    ~*"(MiniProgram|MicroMessenger|miniip|mp-weixin)" "weapp";
    ~*"(iPad|Tablet|Nexus 7|Kindle)" "tablet";
    default "desktop";
}

这段配置放在 http { } 块里，全局生效。它把千差万别的 UA 映射为 mobile/weapp/tablet/desktop 四个稳定字符串，后续所有逻辑都基于 $device_type，而不是原始 UA。

给响应打标，并告诉缓存系统“按设备分存”

光有变量还不够，得让浏览器、CDN、Nginx 自身的 proxy_cache 都知道：这个资源的内容会因设备而异。

add_header X-Device-Type $device_type;
add_header Vary X-Device-Type;

这两行加在 server 或 location 块里。X-Device-Type 是你自定义的标识头，Vary 则明确告诉所有中间缓存：“请把 X-Device-Type 的值纳入缓存键计算”。这样，X-Device-Type: mobile 和 X-Device-Type: desktop 就会命中两个完全独立的缓存项。

让 proxy_cache_key 包含设备类型

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

如果你启用了 proxy_cache（反向代理缓存），必须确保缓存键里包含 $device_type，否则 Vary 头形同虚设：

proxy_cache_key "$scheme$request_method$host$uri$is_args$args$device_type";
# 或更推荐（避免 args 干扰）：
proxy_cache_key "$scheme$request_method$host$uri$device_type";

只要 key 里有 $device_type，Nginx 就会为每个设备类型创建独立缓存条目。

按设备类型设置差异化缓存策略

不同终端对内容更新敏感度不同。比如移动端用户网络不稳定，可适当延长静态资源缓存；PC 端 HTML 可能更频繁更新，缓存时间就该短些：

移动端 HTML：Cache-Control: public, max-age=1800
PC 端 HTML：Cache-Control: public, max-age=600
静态资源（JS/CSS/图片）：统一 public, max-age=31536000, immutable，且不加 Vary——它们本就不因设备而变

实现方式可用 if + add_header，或更清晰的 map + add_header 组合：

map $device_type $html_cache_control {
    mobile    "public, max-age=1800";
    weapp     "public, max-age=1800";
    default   "public, max-age=600";
}
add_header Cache-Control $html_cache_control;

验证是否真正生效

上线前务必检查三点：

用 curl -I -H "User-Agent: Mozilla/5.0 (iPhone..." https://yoursite.com/，确认响应头含 X-Device-Type: mobile 和 Vary: X-Device-Type
同一 URL，换 PC UA 请求，X-Device-Type 应为 desktop，且 X-Cache（或你自定义的缓存命中头）显示 MISS 或 HIT 独立于移动端
查看 Nginx error log 或用 log_format 记录 $device_type 和 $upstream_cache_status，确认不同设备请求确实走了不同缓存路径

不复杂但容易忽略