WordPress Development: Enabling CDN Vary Features When Using wp_is_mobile()

Using wp_is_mobile() in WordPress development? Don't forget to enable Vary feature for CDN

Tips Assistant

About 1 minute.

Jiangsu

2025-11-14

4,383

I earn commissions when you shop through the links below, at no additional cost to you.

CSS Media Judgment

If it's a page that responds to a trial, for example:

/* 移动端设备 (通常小于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端样式 */
}

When the CDN turns on full-site caching, the page displays different content depending on the device.

`wp_is_mobile()`disadvantages

If a WordPress theme is developed with awp_is_mobile() to determine mobile and computer, that happens when the CDN turns on caching:

When the page is visited for the first time on mobile: both computer and mobile will show the mobile page, thewp_is_mobile() will fail, because the page is already cached.
When the page is visited for the first time on the computer: both the computer and the mobile will show the page on the computer, thewp_is_mobile() will fail, because the page is already cached.

Solutions

The Vary feature is needed to solve the above problem

What are Vary features?

Vary is a new HTTP response header added after HTTP/1.1. When a client initiates a request to a source server using the same URL, if different versions of the file content exist on the source server, they may be cached by intermediate caching systems (e.g., browser caches, content delivery network CDNs) and cannot distinguish the scenario response file. Therefore, the origin server can add a Vary header to the HTTP response to inform the intermediate caching system which request header to use to distinguish the cached version of the content.

For example, when client requests are allhttps://www.example.com/test.pdfIn order to distinguish between different versions of files in the client's language, the HTTP response header adds the Vary: Accept-LanguageEdgeOne will build the cache based on the client's request for the Accept-Language The content creates different versions of the cache.

When user A initiates a request at URLhttps://www.example.com/test.pdfThe request header that is carriedAccept-Language:zh-cnEdgeOne will respond with Document A. If EdgeOne does not respond with Document B, EdgeOne will not respond with Document C.

When user B initiates a request for a URL ofhttps://www.example.com/test.pdfThe request header that is carriedAccept-Language:en-USEdgeOne will respond with Document B. If EdgeOne does not respond with Document B, EdgeOne will not respond.

Using wp_is_mobile() in WordPress development? Don't forget to enable Vary feature for CDN - LikaCloud

View the official Vary documentation

Operating Methods

The method of operation is as follows:

Turn it on at the CDNVary 特性

Then in the WordPress theme's functions filefunctions.php Add in:

/**
 * 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');
        }
    }
});

This way, when the CDN turns on full-site caching, the corresponding pages are displayed on mobile and computer.