先看现象。移动端页面头部写了 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 是早期做法,现在会直接触发移动体验扣分,改回设备宽度是第一步。这类问题最好一次改到位,反复小改反而容易把原因搅混。
