基于Mobile Detect的WordPress移动端重定向仅刷新后生效问题

你遇到的「首次访问不跳转、刷新才生效」的问题，根本不是缓存头加得不对，核心原因是跳转代码的放置位置完全错误，被页面缓存插件的静态拦截机制挡住了。
完整的问题链路是：

• 你把检测跳转代码写在WordPress子主题的header.php里，而Clearfy Caching这类页面缓存插件的工作逻辑是：第一次收到页面请求时，直接把模板渲染完成的完整桌面版HTML生成静态副本存在服务器端，后续所有设备的请求进来，只要路径匹配，不管是手机还是电脑，直接返回这份静态HTML，根本不会执行PHP代码流程
• 你第一次用手机访问时，刚好赶上之前电脑端访问留下的静态缓存还没过期，插件直接返回桌面版页面，自然不触发跳转；你手动刷新的时候，触发了缓存校验规则，请求流程才走到你写的PHP代码，完成重定向
• 哪怕你反复清理插件缓存，只要有一次桌面端爬虫、测试访问先生成了静态缓存副本，后续所有移动端请求都会直接拿这份缓存，问题会反复出现

另外你之前的实现还有几个具体的代码错误：

• 调用wp_redirect时参数格式错误：wp_redirect()第一个参数直接填目标跳转URL即可，不需要带Location: 前缀，之前的写法根本不会触发有效跳转
• 你加在页面<head>里的meta缓存标签完全起不到作用：这些标签是HTML渲染完成后才输出的内容，根本影响不到前面302跳转响应的缓存状态
• JS宽度判断的方案本身就不适合做服务端跳转替代：代码嵌在被缓存的页面里不说，还要等整个桌面版页面加载完才执行跳转，体验很差

1. 调整代码放置位置 #

不要再把跳转逻辑放在主题的header.php里，要把检测逻辑放到所有请求最先触达、缓存插件无法拦截的位置：也就是网站根目录的index.php 文件最顶部，在WordPress核心代码加载之前就执行跳转逻辑。
参考实现代码：

<?php
// 放在 /public_html/index.php 最顶部，在「Load WordPress」注释行之前
// 给跳转响应加严格的禁缓存头，避免浏览器缓存302状态
header("Cache-Control: no-cache, no-store, must-revalidate, max-age=0");
header("Pragma: no-cache");

// 引入移动端检测库
require_once __DIR__ . '/lib/mobile-detect.php';
$detect = new Mobile_Detect();

// 移动端用户，且没有主动选择切换桌面版的偏好时，触发重定向
if ($detect->isMobile() && !isset($_COOKIE['show_desktop_site'])) {
    header('Location: https://mywebsite.com/m/', true, 302);
    exit;
}

这个位置的逻辑优势是：所有域名请求进来第一个经过的文件就是根目录的index.php，在WordPress开始加载、缓存插件开始接管请求之前就完成设备检测和跳转，完全绕开静态缓存的拦截。

2. Cookie逻辑的正确使用方式 #

不是必须用Cookie，但Cookie是避免无限重定向、支持用户主动切换站点版本的必须机制，它的作用从来不是解决首次访问不跳转的问题。
你之前写的Cookie逻辑失效，本质也是因为代码被缓存插件挡住了根本没执行。正确的Cookie配套逻辑放在/m目录下的入口文件里（把原来的静态index.html改成PHP入口）：

<?php
// 放在 /public_html/m/index.php 里，替代原来的静态index.html
header("Cache-Control: no-cache, no-store, must-revalidate");

// 处理用户主动切换桌面版的请求
if (isset($_GET['view']) && $_GET['view'] === 'desktop') {
    // 种1小时有效期的偏好Cookie，作用域为整个站点
    setcookie('show_desktop_site', '1', time() + 3600, '/', 'mywebsite.com');
    // 跳回桌面版站点
    header('Location: https://mywebsite.com/', true, 302);
    exit;
}

// 正常输出移动端静态页面的内容
echo file_get_contents(__DIR__ . '/index.html.bak.bak');

配套在移动端页面加的"查看完整桌面版"链接，直接指向https://mywebsite.com/m/?view=desktop即可，用户点了之后就不会再被自动重定向回移动端，不会出现循环跳转。

3. 缓存插件的适配调整 #

进入Clearfy Caching的设置页，做两个调整：

• 开启按设备类型区分缓存的规则，不要用同一份静态副本匹配所有设备
• 把302响应类的路径加入缓存排除规则，不要把跳转响应、移动端入口页面生成静态缓存

• 你之前加的meta缓存标签、手动清理浏览器缓存的操作，都解决不了服务器端静态缓存拦截的问题，因为请求根本没走到输出HTML的流程
• 不要依赖JS判断做跳转，这个方案体验差，而且被缓存后逻辑依然会失效
• Cookie的核心作用是记录用户版本偏好，就算不用Cookie，把检测逻辑放到根目录入口，也能解决首次访问不跳转的问题，只是会丢失用户主动切换版本的能力

内容的提问来源于stack exchange，提问作者David Gaskin