¿Utilizando wp_is_mobile() en el desarrollo de WordPress? No olvide activar la función Vary para CDN

Valoración de medios CSS

Si es una página que responde a un juicio, por ejemplo:

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

Cuando la CDN activa el almacenamiento en caché de todo el sitio, la página muestra un contenido diferente en función del dispositivo.

wp_is_mobile()desventajas

Si un tema de WordPress se desarrolla con unwp_is_mobile() para determinar móvil y ordenador, eso ocurre cuando la CDN tiene activado el almacenamiento en caché:

• Cuando se visita la página por primera vez en el móvil: tanto el ordenador como el móvil mostrarán la página del móvil, elwp_is_mobile() fallará, porque la página ha sido almacenada en caché.
• Cuando se visita la página por primera vez en el ordenador: tanto el ordenador como el móvil mostrarán la página en el ordenador, elwp_is_mobile() fallará, porque la página ha sido almacenada en caché.

prescripción

La solución al problema anterior requiere el uso de la función Vary

¿Qué son las funciones Vary?

Vary es una nueva cabecera de respuesta HTTP añadida después de HTTP/1.1. Cuando un cliente inicia una solicitud al servidor de origen utilizando la misma URL, si existen diferentes versiones del contenido del archivo en el servidor de origen, es posible que sean almacenadas en caché por sistemas de caché intermedios (por ejemplo, cachés de navegador, CDN de red de distribución de contenidos) y no puedan diferenciar entre los archivos de respuesta del escenario. Por lo tanto, el servidor de origen puede añadir una cabecera Vary a la respuesta HTTP para indicar al sistema de caché intermedio qué cabecera de solicitud debe utilizar para distinguir la versión en caché del contenido.

Por ejemplo, cuando las solicitudes de los clientes son todashttps://www.example.com/test.pdfPara distinguir entre las diferentes versiones del archivo en el idioma del cliente, el encabezado de respuesta HTTP añade la propiedad Vary: Accept-LanguageEdgeOne construirá la caché basándose en la solicitud del cliente para el Accept-Language El contenido crea diferentes versiones de la caché.

Cuando el usuario A solicita una URL dehttps://www.example.com/test.pdfLa cabecera de la solicitud que lleva elAccept-Language:zh-cnEdgeOne responderá con el Documento A. Si EdgeOne no responde con el Documento B, EdgeOne no responderá con el Documento C.

Cuando el usuario B inicia una solicitud de una URL dehttps://www.example.com/test.pdfLa cabecera de la solicitud que lleva elAccept-Language:en-USEdgeOne responderá con el Documento B. Si el documento no está en el archivo, EdgeOne responderá con el Documento B.

Consulte la documentación oficial de Vary

método operativo

El método de funcionamiento es el siguiente:

Habilitar en la CDNVary 特性

A continuación, en el archivo de funciones del tema de WordPressfunctions.php Añade:

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

De este modo, cuando la CDN active el almacenamiento en caché de todo el sitio, las páginas correspondientes se mostrarán en el móvil y en el ordenador.

---

Actividades de acogida recomendadas

¿Estás listo para crear un sitio web y sigues buscando alojamiento barato para WordPress? ¡Echa un vistazo a los eventos de proveedores recomendados!