某日,同事 J 说发现一个奇怪的现象:一个列表页,在 iPhone7 竖屏上字体大小正常,横屏的时候有些字体就变的特别大。本文便是笔者对这一 “bug” 的分析过程。

拿到那个页面,在 MacOS Chrome 下模拟了 iPhone7 的设备,发现横竖屏都是正常的。又在自己的手机上测了一下,果然重现了。如下图:

example.png

因为这个页面是响应式页面,对手机横版做了适配,笔者猜测可能是对应的样式没应用上。但转念一想,不对啊,就算是样式没应用上,也应该是整个列表都有问题,不可能就那一个 item 字体有问题。

在调试了几次样式无果后,笔者猜测是 webkit 对字体在某种情况下的“人性化智能”缩放导致,类似桌面端的 Chrome 对 12px 以下字体的限制,具体是什么原因导致的不知道。Google 一番发现有个属性很可能是导致这个 bug 原因:text-size-adjust

引用 MDN 上对 text-size-adjust 的解释:

text-size-adjust 属性 允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准,使用时必须加上前缀:-moz-text-size-adjust,-webkit-text-size-adjust,,和 -ms-text-size-adjust。

因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了 100%,他的文本大小会增加直到达到一个易读的大小,但是不会修改布局。

So? Feature not bug?????

笔者尝试在 item 容器样式上加了一个 -webkit-text-size-adjust:none,发现样式正常了。

到底是什么情况下 text-size-adjust 会自动调整呢?笔者写了几个例子,来还原这 bug,注意使用 iPhone 打开,并观察横竖屏:

分析了一下 text-size-adjust 出现的可能情况:

  1. 容器宽度为百分比,不光 100% 的时候;
  2. 列表项中至少有 2 个元素应用了相同的字体,单个元素没有出现放大的效果;
  3. 容器宽度比 viewport 的宽度大,不论是百分比 120% 还是固定值 px;

修复的方法:

  1. 设置一个比 viewport 窄的固定值;
  2. 在外层样式上应用 text-size-adjust:nonetext-size-adjust:100%两种设置等效,没有用 autoprefix 的同学记得加上厂商前缀,经测试,不带 -webkit 前缀的 text-size-adjust:none 是无效的。
    1
    2
    3
    4
    5
    html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    }

另外,text-size-adjust 在 iPhone 上默认值为 auto,iPad 上的默认值为 none,所以 iPad 并不会出现该 bug。

参考: