如何在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浏览器中管理不同的标准字体大小？

回答

相关问题