现场是这样的。新模板 head 里只写了 meta name=viewport content=width=980 想按设计稿等比缩放 结果移动端整页缩小 字小到看不清 移动体验分掉到 45 百度移动适配一直提示视口配置错误
中间走过弯路,把「缺少 initial-scale=1」当成主因,改完现象没变。
原因不止一个,得分开看。viewport 写死宽度 没有按设备宽度自适应;CSS 用了固定 px 宽度 页面本身不响应式;部分页面重复输出两个 viewport 标签。
动手时先看页面输出的 viewport
curl -s https://www.example.com/ | grep -o 'name="viewport"[^>]*'
然后改成标准写法
<meta name="viewport" content="width=device-width, initial-scale=1">
去掉重复的 viewport 输出
grep -rn 'name="viewport"' wp-content/themes | wc -l
等前面都确认过,再用移动端 UA 复验页面结构
curl -s -A 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0)' https://www.example.com/ | grep -c viewport
隔了一天再看,现象没变,说明不是偶发。
那几天正好在做别的变更,先把时间线对齐才敢动手。
怎么算真的好了,看的是同一批现象。移动端按设备宽度渲染 无横向缩放 体验分回到 80 以上 适配提示消失。
viewport 是移动体验的第一道门 写死宽度等于放弃整站的自适应布局。线上能稳定复现的问题都不算难,难的是只在大流量下才出现的那种。
