手机打开页面只占屏幕左上角一小块,字小得几乎看不清,必须双指放大才能正常阅读,换到桌面浏览器却完全正常。日志里能对上时间点,这种反而好排。
meta viewport 里只写了 width=device-width,initial-scale 那一项被省掉了,浏览器先按九百八十像素的虚拟视口排版,再整体缩到屏幕宽度,看起来就小了一圈。这类漏项在老主题里很常见。这一点先确认清楚,后面就不用反复试。
<meta name='viewport'
content='width=device-width, initial-scale=1'>
<!-- 确认整页只有这一处 viewport 声明 -->
围绕「initial-scale 缺失」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。
处理上按这个顺序:先在 head 里把 viewport 补全,宽度用 device-width,缩放比例写成一,别留空,这一行必须在样式表之前;再全局搜一遍 viewport,确认主题模板或页脚没有又输出一份,后出现的会把前面那份覆盖掉;改完用真机打开看,别只信开发者工具的响应式模式,它的缩放行为和手机并不一致。
结果对不对很好判断,手机打开首页不再提示缩放比例,正文宽度正好铺满屏幕,横竖屏都不留白。
