报错是这么冒出来的。模板里写的是 width=980,手机打开页面整体缩小,文字小到需要放大才能看清。移动端体验报告里提示视口未正确配置。

原因不止一个,得分开看。沿用了早期固定宽度 980 的模板。也可能是没有声明 initial-scale,浏览器按默认缩放。

不容易想到的是,部分页面单独覆盖了 viewport 设置。

第一件事是检查页面里的视口声明

curl -s https://www.example.com/ | grep -o 'name="viewport"[^>]*'

再往下改成设备宽度自适应

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

剩下的就是抽查内页是否一致

curl -s https://www.example.com/a/ | grep -o 'viewport[^>]*'

隔了一天再看,现象没变,说明不是偶发。

那几天正好在做别的变更,先把时间线对齐才敢动手。

恢复的判定其实很直接。手机上页面按屏幕宽度渲染,文字无需放大即可阅读。

提醒一点。改了视口之后,原本靠固定宽度撑开的布局可能错位,先把容器宽度改成百分比,再上线,改完用真机而不是模拟器复测。改动前把原配置备份一份,出问题能马上回滚,这比任何技巧都实用。

作者 9823189