有沒有CSS或其他原因爲什麼Safari/iPhone會忽略一些字體大小設置?在我的特定網站上,iPhone上的Safari呈現一些font-size:13px文字,大於font-size:15px文字。它可能不支持某些元素的字體大小?某些字體大小在Safari(iPhone)上呈現較大
回答
Joe的回覆中有一些很好的最佳實踐,但我認爲你所描述的問題主要集中在Mobile Safari自動縮放文本,如果它認爲文本渲染太小。你可以通過CSS屬性-webkit-text-size-adjust
解決這個問題。這裏有一個如何將其應用到你的身體樣本,只是爲iPhone:
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
我不再使用像素定義,因爲它們確實令人困惑,並且在視覺服務中不完全相同。
拜見單位
- 「EMS」(EM):「環監」是在網絡媒體文件使用一個可擴展單元。 em等於當前字體大小,例如,如果文檔的字體大小是12pt,則1em等於12pt。 Ems具有可擴展性,因此2em等於24pt,.5em等於6pt等。由於可擴展性和移動設備友好性,Ems在Web文檔中越來越流行。
- 像素(像素):像素是用於屏幕媒體(即在計算機屏幕上讀取)的固定尺寸單位。一個像素等於計算機屏幕上的一個點(屏幕分辨率的最小分數)。許多網頁設計師在網頁文檔中使用像素單位,以便在瀏覽器中呈現網站時產生像素完美的網站表示。像素單元存在的一個問題是,對於視覺受損的閱讀器,它不會向上擴展,或者向下擴展以適應移動設備。
- 積分(pt):積分常用於印刷媒體(任何要印在紙上的東西等)。一點等於1/72英寸。點與像素非常相似,因爲它們是固定大小的單位,無法縮放。
- 百分比(%):百分比單位與「em」單位非常相似,除了一些基本的差異。首先,當前字體大小等於100%(即12pt = 100%)。在使用百分比單位時,您的文字對於移動設備和輔助功能仍可完全擴展。
答案,就是用1個規定單位爲文本(即12pt),然後爲所有後續的CSS定義使用font-size:90%;或字體大小:110%;等等。這對於所有支持的設備都更容易訪問。 – 2010-07-12 05:14:25
你忘了最重要的:REM(參考EM)。您可以在整個文檔中使用它並保持不變(不是級聯)。 – 2014-11-30 11:46:23
這個答案不相關,也不以任何方式回答問題。問題是關於相同大小的文本渲染不同,而不是使用什麼單位。問題真的停留在那裏,無論使用什麼單位。 – 2016-03-17 15:08:55
我有同樣的問題,結果發現在原來的CSS有這行:
-webkit-文本的大小調整:120%;我不得不把它改成100%,一切都很順利無需將所有px更改爲em或%%。
設計師應該使用em來表示字體大小。 – 2013-02-07 13:48:20
...除了在身體標記CSS的px大小是最好的。 – 2013-05-21 09:47:01
此外,還要確保你在你的視初始變焦設置設置爲1元標籤:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
- 1. 字體大小在iPhone上呈現不同
- 2. 字體大小呈現的問題
- 3. sIFR:呈現的不同字體大小
- 4. safari上的字體大小不一致
- 5. FreeType2 - 字體大小較小
- 6. iPhone上的字體大小小於PC
- 7. iPhone Safari上的定位和字體大小問題
- 8. PhantomJS字體未呈現某些文字
- 9. Chrome在設備上呈現基於em的字體大小
- 10. 字體大小em在某些設備上顯示不同
- 11. Firefox使用一些Unicode字符呈現比字體大小更小的字符
- 12. Android WebView在某些設備上異常大縮放級別和字體大小
- 13. 頁面可以呈現的最大字體大小
- 14. iphone - 計算字體大小
- 15. iPhone HTML5字體大小
- 16. 在iPhone上呈現某些字符標誌
- 17. iphone上的文字較大
- 18. 更改Safari/iPhone上的幀大小
- 19. Safari字體呈現錯誤
- 20. 某些unicode字符不會在某些設備上呈現
- 21. Safari Canvas百分比字體大小
- 22. 字體大小在文本較長時不會調整大小
- 23. 字體大小的動畫在safari上無法正常工作
- 24. 在Safari中調整字體大小,例如Safari Mobile
- 25. 爲什麼這些TD元素中的字體呈現不同的大小?
- 26. Winforms上的字體大小
- 27. 強制瀏覽器呈現「精確」的字體大小?
- 28. 更改字體大小,如果某些排名?
- 29. 在Chrome中顯示時字體大小較大
- 30. 字體大小在Linux比較大的窗口
剛剛遇到這個問題。這個小小的媒體屏幕破解工作完美無瑕。我將開始將它合併到我的CSS入門文件中。 – Throttlehead 2013-01-30 16:32:11
哇,生病了!一直讓我發瘋,我甚至在我發現這個之前嘗試改變類名並在jQuery中設置內聯。救命稻草! – 2013-08-21 16:01:30
你無法想象這對我有多大幫助。 – Mia 2013-11-03 16:37:06