记录一下那天晚上的排查过程。移动端搜索框 font-size 设成 14px iOS 18 上聚焦时页面自动放大 输入完不会缩回 整页错位 用户要手动双指缩放 移动体验被判为视口异常
刚开始盯着「输入框聚焦时动态改字号 引起重排」,折腾了半个多小时,排掉了。
这类报错背后常见的原因有几处,逐个排除就行。输入框字号小于 16px 触发 iOS 自动缩放。还有一种是viewport 允许用户缩放且没有上限。
还有一种情况,页面用了 transform 缩放 又和浏览器缩放叠加。
先确认输入框字号
document.querySelector('input').style.fontSize
随后把输入字号提到 16px
input, textarea, select { font-size: 16px; }
聚焦时不再改字号
input:focus { font-size: 16px; }
剩下的就是用真机复验聚焦行为
在 iPhone Safari 打开搜索页并输入文字
怎么算真的好了,看的是同一批现象。聚焦不再自动放大 输入后页面位置不变 体验提示消失。
提醒一点。iOS 这个缩放阈值是 16px 差一点都不行 用 rem 时记得按根字号换算。改动前把原配置备份一份,出问题能马上回滚,这比任何技巧都实用。
