先看现象。移动端页面头部写了 width=750,手机打开时整页被缩放到屏幕宽度,正文字号实际只有 9px,百度移动体验报告提示页面需缩放才能阅读。

原因不止一个,得分开看。viewport 用固定像素宽度,浏览器按 750 缩放整页。还有一种是字体用 px 写死,缩放后小于可读阈值。

还有一种情况,图片按 750 宽度切图,改成自适应后全部模糊。

另外,媒体查询断点也按 750 设计,与设备宽度对不上。

第一件事是确认页面输出的 viewport

curl -s https://www.example.com/ | findstr /i viewport

量一下移动端的实际字号

curl -s https://www.example.com/css/main.css | findstr /i "font-size"

然后改成设备宽度并保留最大缩放

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

末了按断点重排首屏布局

curl -s https://www.example.com/ | findstr /i "@media"

这次没动代码,只在配置和运行环境上找原因。

恢复的判定其实很直接。viewport 改为 device-width 后,正文按 16px 渲染,体验报告里的缩放提示消失。

提醒一点。固定宽度 viewport 是早期做法,现在会直接触发移动体验扣分,改回设备宽度是第一步。这类问题最好一次改到位,反复小改反而容易把原因搅混。

作者 9823189