WordPress开发：使用wp_is_mobile()时开启CDN Vary特性

CSS媒体判断

如果是响应试的页面，比如：

/* 移动端设备 (通常小于768px) */
@media only screen and (max-width: 767px) {
  /* 移动端样式 */
}

/* 平板设备 (768px到991px之间) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* 平板样式 */
}

/* PC端设备 (大于992px) */
@media only screen and (min-width: 992px) {
  /* PC端样式 */
}

当CDN开启全站缓存时，页面会根据设备显示不同内容。

`wp_is_mobile()`的痛点

如果开发WordPress主题时用了wp_is_mobile() 来判断移动端和电脑端，那当CDN开启缓存时就会出现这样的情况：

当移动端第一次访问页面时：电脑端和移动端都会显示移动端的页面，wp_is_mobile() 就会失效，因为页面已经被缓存了。
当电脑端第一次访问页面时：电脑端和移动端都会显示电脑端的页面，wp_is_mobile() 就会失效，因为页面已经被缓存了。

解决方案

解决以上问题需要用到Vary特性

什么是 Vary 特性

Vary 是在 HTTP/1.1 后新增的一个 HTTP 响应头，当客户端使用同一 URL 向源站服务器发起请求时，如果源站服务器存在不同版本的文件内容时，可能被中间缓存系统（例如：浏览器缓存、内容分发网络 CDN ）缓存，无法区分场景响应文件。因此，源站服务器可以通过在 HTTP 响应中增加 Vary 头来告知中间缓存系统通过哪个请求头部来区分缓存版本内容。

例如：当客户端请求都为https://www.example.com/test.pdf时，源站中为了区分客户端语言响应不同版本的文件，在 HTTP 响应头中增加了 Vary: Accept-Language，EdgeOne 将在建立缓存时，将根据客户端所请求的 Accept-Language 内容建立不同版本的缓存。

当用户 A 发起请求 URL 为https://www.example.com/test.pdf，携带的请求头Accept-Language:zh-cn，则 EdgeOne 将响应文件 A。

当用户 B 发起请求 URL 为https://www.example.com/test.pdf，携带的请求头Accept-Language:en-US，则 EdgeOne 将响应文件 B。

在WordPress开发中使用 wp_is_mobile()？别忘了为CDN开启Vary特性 - LikaCloud云计算

查看官方Vary文档

操作方法

操作方法如下：

在CDN处开启Vary 特性

然后在WordPress主题的函数文件functions.php 里添加：

/**
 * CDN必须开启 Vary 特性
 * 结合 wp_is_mobile()添加Vary: User-Agent响应头
 */
add_action('send_headers', function() {
    if (function_exists('wp_is_mobile')) {
        header('Vary: User-Agent');
        
        // 可选：添加额外的缓存控制头
        if (wp_is_mobile()) {
            header('X-Device-Type: Mobile');
        } else {
            header('X-Device-Type: Desktop');
        }
    }
});

这样当CDN开启全站缓存时，移动端和电脑端就会显示对应的页面。