安卓Chrome移动端字体大小显示异常问题求助

我碰到过类似的移动端字体缩放问题，结合你已经做的配置，分享几个排查和解决的方向：

• 检查字体单位与范围限制
  特定区域的字体如果使用了em/rem，可能因为父元素的意外缩放导致大小异常；若用了vw这类相对视窗的单位，在小屏移动端可能被过度放大。建议给异常区域明确设置字体大小，或者用clamp()来限制缩放范围，示例代码：

  .problematic-area {
    font-size: clamp(16px, 1.5vw, 18px);
  }
  

• 针对Chrome移动端强制缩放做特殊处理
  部分用户可能开启了Chrome的「文字缩放」无障碍功能，即使配置了text-size-adjust: 100%，个别区域仍可能被Chrome的算法优先处理。可以尝试给异常区域额外添加：

  .problematic-area {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }
  

  注意：这个属性在部分浏览器场景有兼容性限制，测试后再上线。

• 排查transform属性的连带影响
  如果异常区域或其父元素使用了transform: scale()这类缩放样式，Chrome移动端可能会同步缩放字体，即使你设置了文本大小锁定。建议把缩放逻辑换成直接调整font-size、width、height属性，或者给父元素添加transform-origin: top left来修正缩放基点。

• 验证normalize.css的冲突
  虽然normalize.css用于重置样式，但不同版本或自定义修改后的规则可能和你的配置冲突。可以临时注释掉normalize.css的引入，观察字体是否恢复正常，以此排查是否是重置规则覆盖了你的设置。

• 添加移动端专属媒体查询
  针对安卓Chrome移动端单独编写媒体查询，给异常区域指定精准的字体大小，避开桌面模式的样式规则，示例：

  @media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .problematic-area {
      font-size: 16px;
    }
  }
  

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