UIWebView中字體自動放大問題的探究

前端時間在給客戶端添加syntaxhighlighter JS插件時發現一個問題： 若是一段代碼中有一行代碼比較長，越出了屏幕，那麼，整段代碼的字體就會變大，對不上行號。



其實這個問題在客戶端的軟件詳情頁中也碰到過。軟件詳情頁下方是關於軟件的信息，整個信息表格是個table，當某項信息太長時，字體就會放大，整個table就變得很是難看。


因而我添加了下面這段代碼

#software_information tr th {
    white-space: nowrap;
    vertical-align: top;
}

#software_information tr td {
    word-break: break-all;
}

效果很好



而此次，syntaxhighlighter處理過的代碼片斷其實也是一個table，左邊的行號和右邊的代碼各是一個td。由此我想，是否是能夠經過給代碼強制換行解決這個問題呢？谷歌一下，嘗試了幾個換行方法後，發現都不太好使，會使行號和代碼的對應關係錯亂，後來，我在 這篇博客中找到錯亂的緣由。那麼，如今該怎麼辦呢？有兩個方法：一、改用能夠自動換行的2.x版；二、堅持強制換行，但那樣就要寫大段js。這兩個方法我都不喜歡。


那如今只能正面解決問題了。但是，問題的成因是什麼呢？上次發現軟件詳情頁的顯示問題時我就認爲可能跟iOS上的渲染有關係。因而我修改一下關鍵字，再谷歌一下，居然發現有人遇到了 一樣的問題！我在第二個解答下面的評論裏找到了解決方法：

.syntaxhighlighter { -webkit-text-size-adjust: none; }

測試了一下，顯示效果很好，沒有字體大小的變化。

看來問題是出在-webkit-text-size-adjust這個屬性上了，那麼這個屬性有什麼用的呢？
查閱 Safari CSS，裏面寫道：

Specifies a size adjustment for displaying text content in Safari on iOS.

不夠詳細。繼續搜索，找到了 這篇文章，裏面提到

Mobile Safari on iPhone will automatically increase the size of small text

據此，對於這個顯示問題的成因，我猜是這樣的： 若是某個td太長，越出了屏幕，Safari就判斷table是顯示在更大的屏幕上的，文字就被自動放大了。而整個table同一列的td長度是同樣的，因此其餘行中同一列的td裏的文字也會放大。

另外，根據文章所說，若是將-webkit-text-size-adjust設置爲none的話，縮放時，文字就不會調節大小，因此我按照best practice(Bootstrap也是這樣哦)，修改了一下CSS：

body {
    /* ...... */
    -webkit-text-size-adjust: 100%;
}

顯示正常。

參考：
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
http://caniuse.com/#feat=text-size-adjust
http://stackoverflow.com/questions/15861093/what-does-webkit-text-size-adjust-do