出現問題
這幾天在做移動端頁面，研究了一下手淘的 flexible.js 並在自己專案中試行了一下，然後發現了乙個糾結無比的問題，即：css裡設定了字型大小，但是顯示卻非常詭異，用 「詭異」 來形容是因為這個問題在定位的時候真的無跡可尋。
探查原因
後來接觸到了乙個概念，終於了解了問題的本來面目。這個概念叫做 「font boosting」（文字**）。
當 viewport 的 initial-scale 為 1時，不會涉及這個問題。
而 flexible.js 會依據 window.devicepixelratio 值來對頁面進行縮放
這時候，webkit 核心在移動端瀏覽器提供的 「font boosting」 屬性開始起作用了，它會對字型進行放大，以便讓人們方便的檢視文字。
其計算規則如下：
multiplier = math.max(1, devicescaleadjustment * textscalingslider * systemfontscale * clusterwidth / screenwidth);
if (originfontsize < 16)
else if (16 <= originfontsize <= (32 * multiplier - 16))
else if (originfontsize > (32 * multiplier - 16))
下面兩個樣式選擇乙個就可以解決問題
p //給元素加乙個高度
p //禁用webkit核心瀏覽器的文字大小調整功能
移動端字型設定
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windows ...
移動端如何設定字型
說起移動端字型，就會想到它的布局方式以及布局單位，那麼以下就是幾種布局 布局方式 一 靜態布局 static layout 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。1 布局特點 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布...
移動端字型設定rem。和相容。
一 做少部分手機適配可以用px。二 當要適配各種手機端裝置時用rem。二 1.使用rem來設定web頁面的字型大小 2.rem是相對於根元素 3.rem能等比例適配所有螢幕 4.在根元素中定義了乙個基本字型大小為62.5 也就是10px。設定這個值主要方便計算，如果沒有 設定，將是以 16px 為基...