某些字體大小在Safari（iPhone）上呈現較大

Question

有沒有CSS或其他原因爲什麼Safari/iPhone會忽略一些字體大小設置？在我的特定網站上，iPhone上的Safari呈現一些font-size：13px文字，大於font-size：15px文字。它可能不支持某些元素的字體大小？

Answer 1

Joe的回覆中有一些很好的最佳實踐，但我認爲你所描述的問題主要集中在Mobile Safari自動縮放文本，如果它認爲文本渲染太小。你可以通過CSS屬性-webkit-text-size-adjust解決這個問題。這裏有一個如何將其應用到你的身體樣本，只是爲iPhone：

@media screen and (max-device-width: 480px){ 
    body{ 
    -webkit-text-size-adjust: none; 
    } 
} 

Answer 2

我不再使用像素定義，因爲它們確實令人困惑，並且在視覺服務中不完全相同。

拜見單位

1. 「EMS」（EM）：「環監」是在網絡媒體文件使用一個可擴展單元。 em等於當前字體大小，例如，如果文檔的字體大小是12pt，則1em等於12pt。 Ems具有可擴展性，因此2em等於24pt，.5em等於6pt等。由於可擴展性和移動設備友好性，Ems在Web文檔中越來越流行。
2. 像素（像素）：像素是用於屏幕媒體（即在計算機屏幕上讀取）的固定尺寸單位。一個像素等於計算機屏幕上的一個點（屏幕分辨率的最小分數）。許多網頁設計師在網頁文檔中使用像素單位，以便在瀏覽器中呈現網站時產生像素完美的網站表示。像素單元存在的一個問題是，對於視覺受損的閱讀器，它不會向上擴展，或者向下擴展以適應移動設備。
3. 積分（pt）：積分常用於印刷媒體（任何要印在紙上的東西等）。一點等於1/72英寸。點與像素非常相似，因爲它們是固定大小的單位，無法縮放。
4. 百分比（％）：百分比單位與「em」單位非常相似，除了一些基本的差異。首先，當前字體大小等於100％（即12pt = 100％）。在使用百分比單位時，您的文字對於移動設備和輔助功能仍可完全擴展。

Answer 3

我有同樣的問題，結果發現在原來的CSS有這行：

-webkit-文本的大小調整：120％;我不得不把它改成100％，一切都很順利無需將所有px更改爲em或%%。

Answer 4

此外，還要確保你在你的視初始變焦設置設置爲1元標籤：

<meta name="viewport" content="width=device-width; initial-scale=1.0;" /> 

Answer 5

Use 100% instead of None.

normalize.css包括本