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

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

攻略小助手

约1分钟

江苏

2025-11-14

4,422

當您透過下方連結購物時，我會獲得佣金，而您無需支付額外费用。.

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