讓iPhone的字體大小與其他瀏覽器相同

很久以前，我讀了a great article，它描述了一種跨瀏覽器友好的方式來使用CSS來設置文本大小。描述的策略是這樣：讓iPhone的字體大小與其他瀏覽器相同

body { 
    font-size:100%; 
    line-height:1.125em; /* 16×1.125=18 */ 
} 
.bodytext p { 
    font-size:0.875em; /* 16x.875=14 */ 
} 
.sidenote { 
    font-size:0.75em; /* 16x0.75=12 */ 
}

這種策略上，除了Safari瀏覽器在iPhone上，每一個瀏覽器，似乎總是放大文本的某些位的偉大工程。有沒有什麼策略可以防止這種情況發生？

通常我的解決方案是增加-webkit-text-size-adjust: none;來防止iPhone擴大文本的大小，但我最近遇到this article，它描述了它不允許用戶放大任何Safari瀏覽器上的文本 - 顯然是一個問題。我知道那裏有一個純CSS的解決方案，但我找不到它。我只想知道如何設置字體大小，以便在所有瀏覽器（包括iPhone）上顯示相同的字體大小。

更新：爲了演示一個示例，如果您在iPhone上查看this，您會注意到段落中的文本比網站上其他文本顯着更大。爲什麼這個文本被單獨列出，並且有什麼方法可以通過查看會發生的代碼來判斷？

來源

2011-06-07 Wex

請記住，可訪問性標準可能會阻止您完全實現您要求的內容。固定的字體大小對於視覺受損的人來說是一場噩夢。 – Rippo 2011-06-07 13:52:23

我不希望字體大小一定是「固定的」，我只是希望它們都默認顯示相同的大小。 – Wex 2011-06-07 17:38:15

在這種情況下，您唯一的解決方案是使用圖像而不是文本。我想你在這裏問不可能的事。 – Rippo 2011-06-07 17:56:26

你有你滿意的技術，但是有一個缺點：

這種戰略上的每個瀏覽器除了Safari瀏覽器在iPhone上，它似乎總是放大文本的某些位偉大工程。有沒有什麼策略可以防止這種情況發生？

..

通常情況下我的解決辦法是添加 -webkit-文字大小調整：無;爲了防止iPhone從擴大大小的文本，但最近，我跨越this article，它描述，它不允許用戶在放大上就任何Safari瀏覽器的文本 - 明確一個問題。我知道那裏有是一個純CSS的解決方案，但是我找不到。

只是一個建議，這似乎是一個很好的：

從http://html5boilerplate.com/mobile/
/* Prevent mobile zooming while remain desktop zooming. 
    github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 
*/ 
body { 
    -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: none; 
} 
這聽起來像是你到底是什麼後，尤其是當你閱讀the comment in the link在style.css展望想法設置 -webkit-text-size-adjust到100%而不是none。將其設置爲none 可防止桌面上的字體縮放 WebKit瀏覽器，這看起來像是一個可訪問性問題。移動Safari瀏覽器的默認值是超過100%，這就是爲什麼文本更大 - 如果你將它設置到100%而不是沒有，字體留正確的尺寸上移動，但可以仍然在桌面上被放大。

來源

2011-06-10 01:55:53 thirtydot

謝謝你提供的信息豐富的答案。我會測試一下，讓你知道我看到了什麼。 – Wex 2011-06-10 03:13:38

這隻會導致我對「有效」CSS的下一個擔憂。我仍然有興趣查看是否存在不需要特定於瀏覽器的CSS的修復程序。 – Wex 2011-06-10 03:14:49

@Wex：你有機會試試這個嗎？關於「有效」的CSS - CSS在任何重要的意義上都是「有效的」。 [這是一個「功能」]（http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html），這是特定於一個瀏覽器（Mobile Safari），所以很自然你將需要「瀏覽器特定的CSS」。我看不到任何方式.. – thirtydot 2011-06-11 22:13:17

從我的經驗，使用像素，而不是點，Mac和PC顯示點不同，而像素或多或少相同（說實話總是有差異，但像素是不太明顯）。

此外，line-height，可惜總是有差異，（甚至Safari和Firefox在Mac之間），但你可以隨時使用條件樣式的Internet Explorer，並在必要時，使用Firefox的line-height JavaScript的解決方案。

最後，一些字體可以顯示不同的跨瀏覽器，這是一個測試問題。

來源

2011-06-07 08:47:08 jackJoe

我明白他們顯示不同 - 我的問題是如何解決這些差異 – Wex 2011-06-07 08:52:59

@Wex即使使用像素？並使用大多數瀏覽器支持的*字體*這是我的兩個主要解決方案。 – jackJoe 2011-06-07 09:11:00

@Wex - 簡而言之，jackJoe所說的是，如果您使用的是每個瀏覽器支持的像素和字體（後者在技術上仍然不可能，即使使用所謂的「網頁安全」字體），您無法修復差異。簡而言之，每個瀏覽器的內容都會有所不同，對於某些情況，您無能爲力。這不是紙設計，不應該這樣對待。接受或至少說明無法改變的差異會更好。否則，你會堅持試圖讓每個瀏覽器中的所有內容都可以想象。 – Shauna 2011-06-07 12:36:59

讓iPhone的字體大小與其他瀏覽器相同

回答

相關問題