移动端动态生成HTML段落字体与原生不一致问题排查

这个异常是**Chrome移动端的字体自动缩放（Font Boosting/Text Autosizing）**导致的，具体细节如下：

• 缺少viewport元标签
  你的页面未在<head>中添加viewport配置，移动端浏览器会默认采用“桌面适配”模式，自动调整页面缩放比例，同时会对它判定为“主要内容”的文本（尤其是动态加载的长文本）进行字体放大，以此提升移动端可读性。而初始的<p>extra1</p>因为文本过短，不会触发自动放大机制，最终出现两段字体大小不一致的情况。

• em单位的相对性叠加影响
  你使用em作为字体单位，它是基于父元素字体大小的相对单位。在没有viewport的情况下，移动端浏览器的默认根字体大小（html元素）会被调整，再加上字体自动缩放的叠加效果，进一步放大了动态添加文本的字体尺寸。

1. 添加viewport元标签，强制浏览器按设备宽度渲染，禁用自动缩放：

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

2. （可选）若要彻底禁用字体自动缩放，可在CSS中补充以下代码：

   html {
     text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
   }
   

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