ios因webkit内核的font boosting机制自动放大字体，且会根据容器宽度动态调整font-size渲染大小，导致与安卓显示不一致。
为什么 iOS 会因 font-size
iOS Safari 的这个行为不是 bug，是明确的可访问性策略：当 input 或 textarea 的最终计算 font-size 小于 16px 时，浏览器会强制将视口临时缩放到约 1.5–2 倍，确保文字在小屏上可读。它不看你的 CSS 是否写了 font-size: 14px，而是看**渲染后的真实字号**——包括 rem 换算、父级继承、em 累积、甚至 zoom 或 transform 影响。
如何准确检查并确保 font-size ≥ 16px
光写 font-size: 16px 不够，必须验证最终生效值：
- 用 Safari 开发者工具（真机连接或模拟器）选中输入框，查看
Computed面板里的font-size值，确认是 ≥16px的绝对像素值 - 若用
rem，检查根元素:root的font-size是否被动态修改过（比如某些 UI 库在移动端设为10px） - 避免父容器设置
font-size: 0.875rem叠加后导致子input实际只有14px - 对
textarea单独检查，它常被忽略，但同样触发放大
font-size ≥ 16px 为什么比 viewport 控制更可靠
maximum-scale=1.0 在 iOS 16+ 已被 Safari 部分忽略，尤其在聚焦瞬间；而 font-size 触发机制是底层渲染逻辑，不受版本降级影响：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 它不依赖 JS 监听事件，无竞态风险（比如
focusin比meta修改慢几毫秒） - 不干扰用户后续双指缩放需求（
user-scalable=no会彻底锁死，影响可访问性） - 无需维护原始
viewport内容字符串，避免失焦后恢复失败导致整站缩放异常 - 对安卓 WebView 同样有效，且无兼容性差异
兜底方案：-webkit-text-size-adjust: 100%
当无法统一调整所有输入框字号（比如受第三方组件限制），可用这个 CSS 属性抑制浏览器自动调整：
input,
textarea {
-webkit-text-size-adjust: 100%;
}
注意：-webkit-text-size-adjust 仅作用于文本类输入框，且必须配合 font-size 显式声明才稳定生效；单独使用可能被 Safari 忽略。真正起效的组合是：
-
font-size: 16px（或等效计算值） -webkit-text-size-adjust: 100%-
width=device-width在viewport中存在（缺失会导致整个 viewport 解析失效）
最易被忽略的是字号的「继承链」和「计算结果」，而不是写了多少行 CSS。真机调试时直接看 Computed 值，比猜配置靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
