先把当时的情况摆出来。主题里自带一个 viewport,SEO 插件又注入了一个,两个标签内容不同。移动端实际按第一个 width=980 渲染,页面缩成小字,百度移动适配提示视口设置不合规。

这类报错背后常见的原因有几处,逐个排除就行。插件在 wp_head 里重复输出了 viewport 标签。少数情况下是两个标签顺序不定,主题的先输出就被采用。

另外,CDN 的 HTML 改写又追加了一个。少数情况下是模板里同时存在手写标签与框架配置。

数页面里的 viewport 数量

curl -s https://www.example.com/ | grep -c 'name="viewport"'

只保留一个标准声明

<meta name="viewport" content="width=device-width, initial-scale=1">

移除插件里的重复输出

remove_action('wp_head', 'wpseo_viewport', 1);

等前面都确认过,再用移动 UA 复验渲染宽度

curl -s -A 'Mozilla/5.0 (iPhone)' https://www.example.com/ | grep viewport

中途换过一次思路,把范围缩到最小的那一层,反而快了。

别只看报错消失,验证要多做一步。页面只剩一个 viewport,移动端按设备宽度渲染,百度适配校验通过。

容易忽略的是,viewport 出现多个时浏览器只认第一个,谁先输出谁生效,排查要按 HTML 顺序看。监控比日志更早给出信号,事后回看经常能提前半小时发现异常。

作者 9823189