Android端Chrome中div随系统字体放大异常，h3正常问题求助

问题原因 #

Android系统的字体缩放设置会触发Chrome浏览器对不同元素的差异化文本处理：标题元素（如<h3>）默认会被限制过度缩放以保持排版一致性，而<div>这类通用容器元素没有此限制——即使两者设置了相同的1rem字体大小，<div>的文本也会被浏览器额外放大，导致显示异常。

解决方案 #

给目标<div>元素添加text-size-adjust相关属性，强制浏览器保持文本缩放比例与根元素一致，和<h3>的表现对齐：

修改后的CSS代码：

h3 {
  font-size:1rem;
  display:flex;
  flex-wrap:wrap;
  & span {
    display:inline-block;
    width:100%;
  }
}

div {
  font-size:1rem;
  display:flex;
  flex-wrap:wrap;
  /* 添加以下两行属性 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  & span {
    display:inline-block;
    width:100%;
  }
}

说明 #

• text-size-adjust: 100% 是标准CSS属性，-webkit-text-size-adjust: 100% 是针对WebKit内核浏览器（如Chrome）的前缀兼容写法。
• 该属性会禁止浏览器对元素文本进行自动额外缩放，确保<div>和<h3>在系统字体缩放时保持相同的字体大小比例。

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