Jugement de média CSS
S'il s'agit d'une page qui répond à un essai, par exemple :
/* 移动端设备 (通常小于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端样式 */
}Lorsque le CDN active la mise en cache intégrale, la page affiche un contenu différent en fonction de l'appareil.
wp_is_mobile()inconvénients
Si un thème WordPress est développé avec unwp_is_mobile() pour déterminer le mobile et l'ordinateur, cela se produit lorsque la mise en cache du CDN est activée :
- Lorsque la page est visitée pour la première fois sur un téléphone portable : l'ordinateur et le téléphone portable afficheront tous deux la page du téléphone portable, l'adresse de l'ordinateur et l'adresse du téléphone portable.
wp_is_mobile()échouera, car la page a été mise en cache. - Lorsque la page est visitée pour la première fois sur l'ordinateur : l'ordinateur et le téléphone mobile afficheront tous deux la page sur l'ordinateur, le téléphone mobile et le téléphone portable.
wp_is_mobile()échouera, car la page a été mise en cache.
prescription
La solution au problème ci-dessus nécessite l'utilisation de la fonction Vary
Quelles sont les caractéristiques de Vary ?
Vary est un nouvel en-tête de réponse HTTP ajouté après HTTP/1.1. Lorsqu'un client lance une requête vers le serveur d'origine en utilisant le même URL, si différentes versions du contenu du fichier existent sur le serveur d'origine, elles peuvent être mises en cache par des systèmes de mise en cache intermédiaires (par exemple, les caches des navigateurs, les réseaux de diffusion de contenu) et peuvent ne pas être en mesure de différencier les fichiers de réponse du scénario. Par conséquent, le serveur d'origine peut ajouter un en-tête Vary à la réponse HTTP pour indiquer au système de mise en cache intermédiaire l'en-tête de requête à utiliser pour distinguer la version mise en cache du contenu.
Par exemple, lorsque les demandes des clients sont touteshttps://www.example.com/test.pdfAfin de distinguer les différentes versions du fichier dans la langue du client, l'en-tête de réponse HTTP ajoute l'attribut Vary: Accept-LanguageEdgeOne construira le cache sur la base de la demande du client pour le fichier Accept-Language Le contenu crée différentes versions du cache.
Lorsque l'utilisateur A demande un URL dehttps://www.example.com/test.pdfL'en-tête de la requête qui est transportéeAccept-Language:zh-cnEdgeOne répondra avec le document A. Si c'est le cas, EdgeOne répondra avec le document B. Si c'est le cas, EdgeOne répondra avec le document C.
Lorsque l'utilisateur B lance une requête pour un URL dehttps://www.example.com/test.pdfL'en-tête de la requête qui est transportéeAccept-Language:en-USEdgeOne répondra avec le document B. Si le document n'est pas dans le dossier, EdgeOne répondra avec le document B.
Voir la documentation officielle de Vary
mode opératoire
Le mode de fonctionnement est le suivant :
Activer au CDNVary 特性
Ensuite, dans le fichier de fonctions du thème WordPressfunctions.php Ajouter :
/**
* 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');
}
}
});
Ainsi, lorsque le CDN active la mise en cache intégrale du site, les pages correspondantes s'affichent sur le téléphone portable et l'ordinateur.
Activités d'accueil recommandées
Prêt à créer un site web et toujours à la recherche d'un hébergement WordPress bon marché ? Consultez les événements recommandés par les vendeurs !
Français