本文首發於 dawei.lv
某日，同事 J 說發現一個奇怪的現象：一個列表頁，在 iPhone7 豎屏上字型大小正常，橫屏的時候有些字型就變的特別大。本文便是筆者對這一 “bug” 的分析過程。
拿到那個頁面，在 MacOS Chrome 下模擬了 iPhone7 的裝置，發現橫豎屏都是正常的。又在自己的手機上測了一下，果然重現了。如下圖：
因為這個頁面是響應式頁面，對手機橫版做了適配，筆者猜測可能是對應的樣式沒應用上。但轉念一想，不對啊，就算是樣式沒應用上，也應該是整個列表都有問題，不可能就那一個 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 出現的可能情況：
- 容器寬度為百分比，不光 100% 的時候；
- 列表項中至少有 2 個元素應用了相同的字型，單個元素沒有出現放大的效果；
- 容器寬度比 viewport 的寬度大，不論是百分比
120%還是固定值 px；
修復的方法：
- 設定一個比 viewport 窄的固定值；
- 在外層樣式上應用
text-size-adjust:none或text-size-adjust:100%，兩種設定等效，沒有用 autoprefix 的同學記得加上廠商字首，經測試，不帶-webkit字首的text-size-adjust:none是無效的。html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } 複製程式碼
另外，text-size-adjust 在 iPhone 上預設值為 auto，iPad 上的預設值為 none，所以 iPad 並不會出現該 bug。
參考：