iPhone上的字體大小渲染不一致

我正在測試我的網站，並且在除了iPhone瀏覽器（我認爲它是移動Safari？）之外的每個瀏覽器上都正常工作，它會呈現帶有更大字體的文本。我已經通過手動檢查了CSS並在頁面上使用了螢火蟲，並且我可以確認我已將相同的尺寸放到了所有的上面。我該如何解決？iPhone上的字體大小渲染不一致

來源

2010-03-30 Terix

user612626的答案應該是公認的答案（144票，在寫作的時候） – 2017-02-22 13:14:21

這個答案根本不存在我寫這個問題的時間，我用標記的答案。這是7年前:) – Terix 2017-03-08 20:25:52

:)我是這麼認爲的。但你現在可以更新你選擇的接受答案 – 2017-03-13 10:40:32

155

要在盧卡斯的想法略有改善，請嘗試使用在你的CSS以下規則：

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

使用值「100％」，而不是「無」，允許所有其他基於Webkit的瀏覽器仍調整文字時使用縮放功能，同時仍保留原始字體大小。

來源

2011-02-11 07:23:51 user612626

真棒解決方案，謝謝 – 2012-01-11 12:01:41

這對我的iPhone 4s很好，謝謝 – ngplayground 2012-07-02 10:54:25

這是正確的答案！ – scruffian 2012-08-24 14:36:12

Mobile Safari會嘗試修改內容，以便在默認情況下在屏幕上可讀 - 它具有與其他瀏覽器不同的默認樣式。

我不知道確切的規則 - 但是當涉及到字體大小，看起來像這樣的工作：一個段落，列表項，或其他「文本」元素中

文本：應用作者的風格而不適應。
DIV或其他非特定元素中的文本：根據Mobile Safari的規則視爲「純文本」和「調整」大小。

所以 - 簡單的答案是，將文本包裝在段落中，並將font-size規則應用於該段落。

這裏有一個快速和骯髒的例子：

<!-- Recommended: Put this in an external stylesheet --> 
<style type="text/css"> 
    p { font-size:10px; } 
</style> 

<div class="appro_body"> 
    <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai 
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco. 
    ... 
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a> 
    </p> 
</div>

（很明顯，你應該移動font-size規則CSS文件）。

來源

2010-03-30 20:12:09 Beejamin

給身體font-size:100%, 然後使用「em」方法給你的網站的每個元素的字體大小。

這將使相應瀏覽器的默認字體大小的字體大小爲100％。例如iPhone safari瀏覽器有12px = 1em（offcourse你需要檢查本地的默認字體大小）。然後，如果你想有10px的字體大小，只需將它除以12，即「0.83em」

我希望你明白，也搜索「css em unit」，你會得到更好的洞察力。

來源

2010-10-01 13:12:20 Chandrakant

'12px = 1em'位是否有文檔？我一直在試圖弄清楚爲什麼iOS不能像預期的那樣使用基於em的媒體查詢。如果這是正確的，那就是原因。 – doubleJ 2013-10-23 16:50:37

把這樣的規則在你的CSS，你的問題了：

body { 
    -webkit-text-size-adjust: none; 
}

編輯：更好的解決方案通過提供user612626，是用100％的值，而不是沒有。

來源

2010-11-14 17:14:01

雖然應該小心使用這種方法。已經發現，當使用放大/縮小功能時，它可以防止在所有基於Webkit的瀏覽器上調整文本的大小。因此它會阻止在網頁上放大文字的任何可能性。 – 2011-01-30 16:50:20

我解決了這個同樣的問題有：

<meta name="viewport" content="width=device-width">

從HTML5Boilerplate目前它的here

來源

2013-04-02 17:41:08

iPhone上的字體大小渲染不一致

回答

相關問題