WordPress開發：使用wp_is_mobile()時開啟CDN Vary功能

喺WordPress開發入面用wp_is_mobile()？記住要為CDN開啟Vary特性

攻略小幫手

大約一分鐘

江蘇

2025-11-14

4,211

當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

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開啟全站緩存嗰陣，手機同電腦就會顯示對應嘅頁面。