相同rem设置的元素font-size计算结果不一致问题咨询

这是WebKit内核移动端浏览器自带的**Font Boosting（字体膨胀/字体自动提升）**特性导致的。当页面未正确配置视口规则、浏览器判定页面需要缩放才能展示完整内容时，会自动给长文本类的内容增大字号，保证用户不用手动放大也能正常阅读，短文本（比如你的标题）不会触发该调整规则，就出现了标题字号符合预期、正文字号被异常放大的情况。

第一步：配置移动端视口 #

在页面<head>标签内添加视口元标签，告诉浏览器页面宽度匹配设备宽度，不要默认缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

90%以上的同类问题添加该标签后即可恢复正常。

第二步：显式禁用字体自动调整规则 #

如果添加视口标签后仍存在字号异常，给全局或对应content元素添加text-size-adjust规则，强制关闭字体自动调整：

/* 全局禁用，也可替换为你content对应的类选择器 */
.content {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

可选兼容hack #

如果需要兼容非常老旧的WebKit内核版本，可给content元素添加如下属性，也能绕过字体自动调整逻辑：

.content {
  max-height: 999999px;
}

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