text-size-adjust属性

场景

因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 视窗 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。

因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。

注意：对于这个属性，不同浏览器有不同的行为和语法，所以需要在想要应用的浏览器加上属性前缀。

---

语法

text-size-adjust 属性的值为 none, auto，或 percentage。

• none：禁用浏览器的文本溢出算法；
• auto：启用浏览器的文本溢出算法，该值一般用于取消先前使用 CSS 设置的 none；
• percentage： 启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度；

代码

body, html {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
  width: 100%;
  height: 100%;
}