WordPress開發：使用wp_is_mobile()時開啟CDN Vary特性

在 WordPress 开发中使用 wp_is_mobile() 函数时，别忘了为 CDN 启用 Vary 功能。

攻略小幫手

约1分钟

江苏省

2025-11-14

4,223

通过下方链接进行购物时，您无需支付额外费用，我就能获得佣金。.

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開啟全站快取時，移動端和電腦端就會顯示對應的頁面。