揭开text-size-adjust bug的神秘面纱

2023-12-04 07:29:20

在移动设备浏览网页时，你是否遇到过这样的困扰：某个列表页在竖屏模式下字体大小正常，一切换到横屏模式，某些字体就变得异常巨大，影响了阅读体验？本文将深入分析这一恼人的 "bug"，为你揭开它的成因和解决之道。

某次，同事 J 向我反馈一个奇怪的现象：在一个列表页面上，当使用 iPhone 7 竖屏浏览时，字体大小正常。然而，一旦切换到横屏模式，某些字体就呈现出令人震惊的大小，严重破坏了阅读体验。

我接手了这个疑难杂症，在 macOS Chrome 浏览器中模拟了 iPhone 7 设备的环境。令人惊讶的是，在模拟环境下，无论是横屏还是竖屏，字体大小都显示正常。为了进一步排查问题，我切换到自己的设备上进行测试。

在我个人的 iPhone 7 上，症状清晰再现：在横屏模式下，列表页上的部分字体确实出现了异常放大。带着对答案的强烈好奇，我开始逐层剥丝抽茧，分析问题根源。

经过一番细致的排查，我发现罪魁祸首正是 CSS 中的 text-size-adjust 属性。该属性旨在调整文本的大小，以适应不同的设备和浏览器设置。然而，在某些情况下，它会产生意想不到的后果。

text-size-adjust 属性有三种取值：

既然我们已经找到了问题的根源，解决办法就变得清晰明了：

禁用text-size-adjust： 在 CSS 中将 "text-size-adjust" 设置为 "none"，强制浏览器使用文本的原始大小。
调整其他字体大小： 如果禁用 "text-size-adjust" 导致字体过小，可以调整其他字体大小（如 "font-size" 或 "line-height"）以优化阅读体验。
使用媒体查询： 对于需要针对特定设备或浏览器进行文本大小调整的情况，可以使用媒体查询来有条件地应用 "text-size-adjust" 属性。