移动端网页字体大小控制异常：部分<p>标签缩放不一致问题

问题背景 #

在三星、华为手机的Chrome 113.0.5672.76中，当系统文字大小设为“超大”时，页面中深层嵌套的<p>标签会被单独放大，而浅层级<p>及其他元素无变化，破坏设计一致性。已尝试text-size-adjust、!important等设置均无效，需求是实现要么完全不缩放，要么整体同步缩放，同时兼顾视障用户的一致性放大需求。

解决方案 #

1. 正确配置text-size-adjust，锁定整体缩放比例 #

通配符*设置text-size-adjust: none会导致优先级和继承问题，改为针对根元素设置100%，既允许系统整体缩放，又阻止局部强制放大：

html {
  -webkit-text-size-adjust: 100%; /* 适配Chrome/Safari/Edge */
  -moz-text-size-adjust: 100%; /* 适配Firefox */
  text-size-adjust: 100%; /* 标准写法 */
}

100%的作用是让页面文本跟随系统设置等比例整体缩放，避免局部单独放大，同时兼容视障用户的缩放需求。

2. 统一字体单位，修复嵌套继承异常 #

当前混用em、inherit和固定像素，深层嵌套的em会因父元素字体大小被系统缩放干扰，导致计算异常。建议：

• 保持根元素基准：html { font-size: 62.5%; }（确保1rem=10px）
• 所有子元素统一使用rem设置字体大小，替代em和inherit：

  body {
    font-size: 2rem; /* 对应20px */
  }
  /* 针对深层嵌套的目标p元素 */
  #pId, .pClass {
    font-size: 2rem !important; /* 直接用rem锁定大小，避免继承干扰 */
  }
  

3. 打破Chrome局部放大判定（顽固场景） #

如果上述方法无效，可通过设置固定行高或最大高度，让Chrome认为文本无需单独放大：

#pId {
  font-size: 2rem !important;
  line-height: 1.5; /* 固定行高，避免浏览器判定文本过小 */
  max-height: 100%; /* 阻止触发局部放大逻辑 */
}

4. 检查视口标签配置 #

确保视口标签正确，避免视口缩放导致的文本异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

若允许用户手动缩放，可保留默认设置；若需锁定缩放，添加maximum-scale=1.0, user-scalable=no即可。

核心原理 #

Chrome移动端的系统文字缩放会优先作用于相对单位（em/rem）元素，但嵌套层级过深或继承链中断时，会触发局部文本放大逻辑。通过锁定根元素的text-size-adjust为100%，并统一使用rem单位，可确保所有元素随系统设置同步缩放，既满足设计一致性，又兼顾无障碍需求。

内容的提问来源于stack exchange，提问作者jamacoe