iOS Safari缩放时字体变大是WebKit默认启用text-size-adjust所致，并非bug；禁用需用html{-webkit-text-size-adjust:none;text-size-adjust:none}并配合合理viewport设置。
为什么iOS Safari缩放时字体突然变大
这不是bug，是iOS Safari的主动行为：当页面被双指缩放时，它会动态调整font-size（尤其是用rem或em定义的文本），试图“保持可读性”。本质是WebKit对text-size-adjust的默认启用——它会无视你写的CSS，强行放大文字。
用text-size-adjust: none禁用自动缩放
这是最直接有效的解法，但要注意兼容性和触发条件：
- 必须写在
之后，且作用于html或body才稳定生效 - iOS 10+支持
text-size-adjust: none；iOS 9只认-webkit-text-size-adjust: none - 不能只加在某个
div上——它只对包含文本的块级元素生效，且父级没禁用时子级可能仍被影响 - 加上后，用户双指缩放仍能放大整个页面（
transform: scale()效果），但文字尺寸不再“跳变”
推荐写法：
html {<br> -webkit-text-size-adjust: none;<br> text-size-adjust: none;<br>}
配合viewport设置避免误触发
很多“字体变大”其实源于viewport配置不当，导致Safari判定页面“需要辅助缩放”：
- 删掉
user-scalable=yes（或设为no）——否则即使禁用了text-size-adjust，用户手动缩放仍可能绕过限制 - 确保
width=device-width存在，且没有initial-scale值过小（如0.5）——否则iOS会认为内容太小，自动开启文字放大补偿 - 避免
maximum-scale设为小于1.0，这会干扰渲染逻辑，反而让text-size-adjust更难控制
稳妥的viewport示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
rem/em布局下还要注意根字号继承
即使禁用了text-size-adjust，如果html的font-size本身被其他样式（比如系统字体设置、第三方UI库重置）修改过，rem计算仍会失准：
- iOS系统“更大字体”设置（设置→显示与亮度→文字大小）会影响
html默认字号，进而影响所有rem - 不要依赖
html { font-size: 16px }——加!important也不保险，应改用html { font-size: 100% }或固定vw方案 - 若用JS动态设置根字号（如根据dpr缩放），务必在
DOMContentLoaded后立即执行，避开Safari的初始渲染时机
简单兜底：
html {<br> font-size: 16px !important;<br> /* 配合 text-size-adjust: none 才真正锁定 */<br>}
真正麻烦的不是加一行CSS，而是iOS Safari把“可访问性”和“开发者控制权”混在一起处理。禁用text-size-adjust只是切掉一个开关，但viewport、根字号、系统设置三者任何一环松动，字体都可能悄悄变大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
