css - 相同的 CSS 在不同的页面上产生不同的字体大小

Question

我正在尝试为我的 Web 应用程序的小屏幕 View 创建 CSS，但我遇到了令人抓狂的字体大小问题。场景如下。

我有一个类，我们称之为 .noListItemsWords。

.noListItemsWords {
   font-size: 80%;
}

设置字体大小的两个页面上的 DOM 上的唯一父级是 body，它的字体大小为 24pt。

在第一页上，浏览器以 47.7681 像素的字体大小呈现此元素:

在第二页，浏览器仅以 32px 的字体大小呈现:

为什么会这样？有什么办法可以解决吗？

编辑:显示在我的 body 标签上使用基本百分比和字体的 rem 单位并不能解决问题:

在谷歌浏览器 57 中测试

Answer 1

好吧，我真的不明白为什么要修复它，但是为视口(viewport)添加元标记会使字体行为恢复到预期状态:

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