CSS-Medienbeurteilung
Wenn es sich zum Beispiel um eine Seite handelt, die auf einen Versuch reagiert:
/* 移动端设备 (通常小于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端样式 */
}Wenn das CDN das Full-Site-Caching aktiviert, werden auf der Seite je nach Gerät unterschiedliche Inhalte angezeigt.
wp_is_mobile()Nachteile
Wenn ein WordPress-Theme mit einerwp_is_mobile() zur Bestimmung von Mobilgeräten und Computern, wenn das CDN das Caching aktiviert hat:
- Wenn die Seite zum ersten Mal auf einem Mobiltelefon besucht wird: Sowohl auf dem Computer als auch auf dem Mobiltelefon wird die mobile Seite angezeigt, der
wp_is_mobile()schlägt fehl, da die Seite in den Cache aufgenommen wurde. - Wenn die Seite zum ersten Mal auf der Computerseite aufgerufen wird: Sowohl auf der Computerseite als auch auf der mobilen Seite wird die Seite auf der Computerseite angezeigt.
wp_is_mobile()schlägt fehl, da die Seite in den Cache aufgenommen wurde.
Verschreibung
Die Lösung des obigen Problems erfordert die Verwendung der Funktion Vary
Was sind Vary-Merkmale?
Vary ist ein neuer HTTP-Response-Header, der nach HTTP/1.1 hinzugefügt wurde. Wenn ein Client eine Anfrage an den Ursprungsserver unter Verwendung derselben URL stellt, können verschiedene Versionen des Dateiinhalts auf dem Ursprungsserver von zwischengeschalteten Caching-Systemen (z. B. Browser-Caches, Content-Delivery-Networks CDNs) zwischengespeichert werden und sind möglicherweise nicht in der Lage, zwischen den Szenario-Antwortdateien zu unterscheiden. Daher kann der Ursprungsserver der HTTP-Antwort einen Vary-Header hinzufügen, um dem zwischengeschalteten Caching-System mitzuteilen, welchen Request-Header es zur Unterscheidung der zwischengespeicherten Version des Inhalts verwenden soll.
Zum Beispiel, wenn alle Kundenanfragenhttps://www.example.com/test.pdfUm zwischen verschiedenen Versionen von Dateien in der Sprache des Clients zu unterscheiden, fügt der HTTP-Antwort-Header die Vary: Accept-LanguageEdgeOne baut den Cache auf der Grundlage der Anfrage des Clients nach dem Accept-Language Der Inhalt erzeugt verschiedene Versionen des Caches.
Wenn Benutzer A eine URL vonhttps://www.example.com/test.pdfDer Request-Header, der von derAccept-Language:zh-cnEdgeOne antwortet mit Dokument A. Wenn dies der Fall ist, antwortet EdgeOne mit Dokument B. Wenn dies der Fall ist, antwortet EdgeOne mit Dokument C.
Wenn Benutzer B eine Anfrage nach einer URL vonhttps://www.example.com/test.pdfDer Request-Header, der von derAccept-Language:en-USDer EdgeOne antwortet mit Dokument B. Ist das Dokument nicht in der Datei enthalten, antwortet der EdgeOne mit Dokument B.
Die offizielle Vary-Dokumentation ansehen
Arbeitsweise
Die Arbeitsweise ist wie folgt:
Aktivieren im CDNVary 特性
Dann in der Funktionsdatei des WordPress-Themesfunctions.php Hinzufügen:
/**
* 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');
}
}
});
Wenn das CDN das Full-Site-Caching aktiviert, werden die entsprechenden Seiten auf dem Handy und dem Computer angezeigt.
Empfohlene Hosting-Aktivitäten
Sind Sie bereit, eine Website zu erstellen und suchen noch nach günstigem WordPress-Hosting? Sehen Sie sich die empfohlenen Anbieterveranstaltungen an!
Deutsch