在移动浏览器上创建一致的物理字体大小

Question

在移动设备上，我客户的大部分网站看起来都像普通的桌面页面。它尚未做出响应，但正在处理中。由于正文宽度固定为 1000 像素，因此在您的移动浏览器中都是微小的文本和内容。所以这将是一个双击派对来实际阅读内容。

那么我的问题是什么？我正在为移动设备构建一个小通知栏。这是一个从网页底部滑入的黄色小条，告诉用户他们正在查看的页面尚未针对移动设备进行优化。除了您是否真的想要这个事实之外，我还试图弄清楚如何使栏内的字体在所有设备上具有一致的物理尺寸。问题是如今所有设备都具有广泛的 DPI。 Another question 我在 StackOverflow 上找到了处理这个问题，但只处理桌面案例。手机是一个完全不同的球赛。

我一直在 CSS 中处理 mm，但浏览器之间的文本渲染不一致非常严重。我想我可以通过基于像素密度以 px 计算字体大小来做到这一点。或者通过为所有 DPI 变体编写一堆媒体查询。但这一切似乎都很愚蠢。我在这里忽略了什么吗？有没有更简单的方法来做到这一点？

Answer 1

使用“em”作为单位而不是 mm 或 px。它会自动适应读者使用的字体。

例子：

p {
font-size:1em;
}