iOS 手機的字型顯示不一樣

轉的别人的。https://www.jianshu.com/p/9fad261dd3e1

-webkit-text-size-adjust 的本職是用于mobile的，見規範 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide。

之是以現在的桌面版webkit浏覽器支援他，是因為實際上這是一下bug。Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS這個bug在最新版的 WebKit Nightly Builds 裡已經被修複了。這屬性現在的一般用處是防止iPhone在堅屏轉向橫屏時放大文字（注意，就算viewport設定了

maximum-scale=1.0

文字還是會放大的）。而且iPhone和iPad的預設設定是不一樣的iPhone預設設定

-webkit-text-size-adjust: auto;

iPad預設設定

-webkit-text-size-adjust: none;

是以iPad預設是不調節的。此屬性還支援百分比，這在目前的桌面版的webkit浏覽器是不支援的，是以如果不想讓iPhone橫堅屏切換的時候調節文字，用

-webkit-text-size-adjust: 100%;

絕對不能用

-webkit-text-size-adjust: none;

這會導緻仍然支援

-webkit-text-size-adjust: none;

的桌面版的webkit浏覽器無法人為放大文字大小，嚴重影響可用性。關于如何在chrome裡實作小于12px的文字。當然文字縮小到12px以下本來就一定程度影響到可用性了，建議無視chrome的這個特性。硬要實作的話，我想到的一個變通方法是先用js判斷是否為chrome （至今還沒聽說有區分safari 和 chrome 的 css hack ）

var isChrome = !!window.chrome;

再用

-webkit-transform: scale( )

縮小到合适值。如果你非得要

font-size:10px

(使用em機關時友善計算)，你會發現在chrome裡最小還是12px，就算你設定了

font-size: 10px;-webkit-text-size-adjust: 100%;

(或

-webkit-text-size-adjust: none;

)也沒用。原因如下：

-webkit-text-size-adjust: 100%|none;

• 隻對chrome27.0 版本以下有效，27.0以上版本無效；
• 隻對英文才有效，對中文無效。

在新版的chrome中，已經禁止了改屬性,建議使用CSS3中的方法:

transform:scale(0.875);

當使用

transform:scale(0.875)

時; 不僅是文字變小了，整個文字所在的容器也同時會變小。

綜上所述：

采用-webkit-text-size-adjust: 100%;
必須要用小于12px字型時，用-webkit-transform: scale( ) 縮小到合适值