如何在FirefoxOS瀏覽器中管理不同的標準字體大小？

我現在正在學習適應性和響應性設計，以便稍後將其應用於Firefox Os Web Apps。我從簡單的HTML頁面開始。我的想法是將設計迴應到瀏覽器的標準字體大小，以便我的應用程序與實際分辨率無關。但我觀察到一種奇怪的行爲：標準字體大小取決於頁面包含多少內容。如何在FirefoxOS瀏覽器中管理不同的標準字體大小？

爲了證明這一點，我準備下面兩個例子

<!DOCTYPE html> 
<html> 
    <head><meta charset="utf-8" /><title>Unnamed</title></head> 
    <body> 
    <h1>A heading</h1> 
    <p>much more text. Bla blabla blablabla. Bla blabla blablabla. Bla blabla 
     blablabla Bla blabla blablabla. Bla blabla blablabla. Bla blabla blablabla. 
     Bla blabla blablabla [...] 
    </p> 
    </body> 
</html>

和

<!DOCTYPE html> 
<html> 
    <head><meta charset="utf-8" /><title>Unnamed</title></head> 
    <body> 
    <h1>A heading</h1> 
    <p>view text. 
    </p> 
    </body> 
</html>

，這是什麼瀏覽器顯示

http://i.stack.imgur.com/UxMFP.png

http://i.stack.imgur.com/LAMC9.png

我的問題：這些差異的原因是什麼？我如何讓小文本版本顯示規則的可讀大小？

更新： 哦，我試了一下中興Open C和ALCATEL ONE TOUCH消防E.該平臺的Firefox OS 1.3

來源

2014-08-29 Christoph85LE

它的縮放級別不同，縮放級別調整後的音量基於頁面上的內容數量。爲此，您可以使用以下meta標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

另一個技巧來處理在Firefox OS的字體大小。添加以下CSS設置基本字體大小：

html, body { 
    font: 10px sans-serif; 
}

現在，您可以設置每個元素的字體大小rem（1個雷姆是= 10px的）：

#someElement { 
    font-size: 1.5rem; 
    width: 4rem; /* also works on other properties */ 
}

所有集。現在，這樣的美景是，在更大的設備，並要擴展的設計，可以從JavaScript這樣做：

document.documentElement.style.fontSize = '12px';

而且所有的元素都在120％大小顯示。

來源

2014-08-29 14:05:27

非常感謝！這完美的作品！ – Christoph85LE 2014-08-29 16:39:40

如何在FirefoxOS瀏覽器中管理不同的標準字體大小？

回答

相關問題