iOS端Safari计算样式与设定值不一致：p标签font-size异常随机放大

你碰到的随机出现21px字号的异常，和你代码里写的任何样式规则都没有关系，根源是iOS Safari 13+ 内置的 Auto Text Size 自动字号适配 机制。
这套机制是WebKit内核在所有CSS规则计算、应用完成之后，在独立的文本渲染管线层直接修改的样式值，完全不遵循普通CSS的优先级规则——哪怕你给元素加内联样式、写!important，甚至通过JS动态强制赋值，只要Safari判定这个文本“在移动端阅读时字号偏小”，就会在内核层覆盖你的设置，随机给文本放大到它认为的合适尺寸（21px就是这套逻辑最常见的触发阈值）。
也正因为这套改动是内核层直接完成的，不会在开发者工具的样式溯源树里留下对应的CSS规则条目，所以你根本找不到21px这个值的来源。它的触发完全没有稳定的代码关联，只会随机选中视口内的文本节点做判定，所以才会出现同布局的磁贴有的正常、有的异常，换个位置的磁贴又随机复现的情况。
另外这套算法对低透明度、灰色置效背景上的文本识别准确率特别低，很容易误判为需要放大的小字号正文内容，这也是为啥异常刚好集中在带模糊置效背景的禁用状态磁贴上，旁边正常状态的蓝色磁贴很少触发的原因。

之前尝试的CSS优先级调整、JS动态赋值的方案，都是在样式计算阶段做的控制，管不到内核最后一步的文本放大逻辑，需要两层防护绕过这套判定流程：

• 第一层：全局拦截自动放大逻辑
  在包含异常磁贴的可滚动面板、单个磁贴的根元素上，直接加带兼容性前缀的字号调整声明，不要只写在全局body样式里：

  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  

  这里要避开两个常见的坑：
  • 不要写text-size-adjust: none，这个值会在旧版iOS上导致横屏时文本完全不做适配，出现截断问题，统一用100%的含义是“保留用户系统设置的字号缩放比例，禁止浏览器额外自动放大”
  • 因为Angular v9默认开启模拟视图封装，全局写的样式因为缺少组件scope属性，可能被Safari的自动放大机制跳过，必须把这个样式直接绑定到滚动面板、磁贴组件的根元素上，不能依赖全局样式的继承
• 第二层：适配iOS 15+的新判定规则
  iOS 15之后Safari修改了Auto Text Size的触发逻辑，会主动绕过单纯的text-size-adjust设置，这时候需要给你设置14px字号的<p>标签内部，套一层完全包裹文本的<span>节点，给这个span设置样式：

  display: inline-block;
  

  这套操作的原理是，Safari的自动放大逻辑只会针对没有明确容器边界的裸行内文本做判定，一旦你给文本套了带明确尺寸边界的inline-block容器，算法就会识别到这是自定义布局的文本、不是正文阅读内容，直接跳过自动放大的判定流程。

• 之前尝试的JS绑定点击事件、动态调整字号的方案没效果，是因为Safari的自动字号调整是在磁贴滚动进入视口、元素完成布局渲染之后才触发的，整个过程不会触发页面的变更检测，你写的JS赋值逻辑早在页面加载完成时就执行过了，根本赶不上内核层的后续覆盖
• 同设备的Chrome浏览器运行正常，是因为iOS上的Chrome只是套了Safari的WebKit渲染壳，但是它会主动关闭这套Auto Text Size的自动调整逻辑，所以不会出现随机放大的问题

内容的提问来源于stack exchange，提问作者Maciej Skrzypiński