Responsive design 如何在FirefoxOS浏览器中管理不同的标准字体大小？_Responsive Design_Font Size_Firefox Os

Responsive design 如何在FirefoxOS浏览器中管理不同的标准字体大小？

responsive-design

Responsive design 如何在FirefoxOS浏览器中管理不同的标准字体大小？,responsive-design,font-size,firefox-os,Responsive Design,Font Size,Firefox Os,我现在正在学习自适应和响应性设计，以便稍后将其应用于Firefox Os Web应用程序。我从简单的HTML页面开始。我的想法是根据浏览器的标准字体大小来响应设计，这样我的应用程序就不知道实际分辨率了。但我观察到一种奇怪的行为：标准字体大小取决于页面包含的内容量为了说明这一点，我准备了以下两个示例 <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>Unnamed

我现在正在学习自适应和响应性设计，以便稍后将其应用于Firefox Os Web应用程序。我从简单的HTML页面开始。我的想法是根据浏览器的标准字体大小来响应设计，这样我的应用程序就不知道实际分辨率了。但我观察到一种奇怪的行为：标准字体大小取决于页面包含的内容量

为了说明这一点，我准备了以下两个示例

<!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>


无名
标题
更多的文本。呜呜呜呜。呜呜呜呜。呜呜呜呜
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉。呜呜呜呜。呜呜呜呜。
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉[…]

及


无名
标题
查看文本。

这就是浏览器显示的内容

我的问题是：这些差异的原因是什么？我怎样才能使微小的文本版本显示规则的、可读的大小

更新：

哦，我在中兴OpenC和阿尔卡特一触式Fire E上试用过。平台是Firefox OS 1.3

不同的是缩放级别，缩放级别会根据页面上的内容量进行调整。为此，您可以使用以下元标记：

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

现在您可以在

rem

中设置每个元素的字体大小（1 rem=10px）：

一切就绪。现在，它的美妙之处在于，在更大的设备上，如果您想扩大设计规模，可以通过JavaScript实现：

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

所有元素都以120%的大小显示

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

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

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