viewport 里同时写了 user-scalable=no 和 maximum-scale=1,iOS 上双指照样能把页面放大,这行限制像完全没生效,安卓上也一样,两个系统都不给面子。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,iOS 10 开始 Safari 出于可访问性考虑直接忽略 user-scalable 和 maximum-scale,除非页面字号本身够大,否则只能靠字号和布局控制观感,这套限制在移动端基本靠不住。
「user-scalable 失效」这类改动最怕改一半,回滚脚本先准备好,再动生产。改完顺手把文档补一句,省得下次自己重新推一遍。
input, select, textarea { font-size: 16px; }
.page { touch-action: manipulation; }
监控和日志的时间要对上,时区不一致会多绕很大一圈。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
具体做法是,把输入框的 font-size 定在十六像素以上,聚焦时就不会触发自动放大;确实要禁止缩放的区域单独用 touch-action 限制手势,别影响整页滚动;别再指望 meta 能锁住 iOS 的双指缩放,用户真要放大是拦不住的。
最后用这个标准收尾,iOS 上双指仍然能缩放,但输入框聚焦后不再放大,交互算达到预期。
