【CSS】解决移动端（高清方案）下在谷歌浏览器中出现 字体大小布局异常，和设置的 font-size 不符（Text Autosizer、Font Boosting）

最近在谷歌浏览器调试移动端高清方案时，发现设置的字体大小竟然和实际显示的字体大小不一致？可以移动端 ua 打开此页面测试下方 demo。
fontSize => 设置字体大小；actualSize => 实际展示字体大小

li 的 fontSize:

---

fontSize: actualSize:

---

auto set text-size-adjust

---

Demo 图

如果你是移动端打开此页面的话，可以看到 li 的 fontSize 明明是 22px，但是实际 chrome 内显示的却是 34px，这是为什么？

Text Autosizer

逛了一圈发现该属性为 Webkit 给移动端浏览器提供的特性（特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」），可以看下 MDN 如何描述：

因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 视窗 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。
因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。

初心是好的，这种不是预期内的特性总是会给开发人员带来麻烦。下面提供几个解决方案，可以根据实际情况选择。

解决方案

• 【推荐】设置 text-size-adjust: none;，禁用掉该特性。可以在上述 demo 内，切换移动端 ua，点击 auto set text-size-adjust 按钮，查看效果（可来回切换）。因该属性为可继承（MDN）所以在上面设置一下就行了。

  body {
      text-size-adjust: none;
  }

• 设置 initial-scale=1。当 initial-scale 为 1 时，不会触发 Font Boosting，一般使用高清方案例如 rem、vw 等时会设置 initial-scale 为一个缩放值，一般推荐上面的方案

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 或 -->
  <meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">