CSS像素字体大小的一致性

假设我想渲染两个大写字母'T'，两个高度都是，正好是。一个'T'在具有Retina Display（220 DPI，CSS像素比例2）的Macbook Pro上呈现，另一个在iPhone 4S（326 DPI，CSS像素比率2）上呈现。为此，我将Macbook Pro上的字体大小设置为220/2 = 110px，并将iPhone 4S上的字体大小设置为326/2 = 163px。但是，两个'T的are still not the same size。为什么？另外，我可以做些什么来确保这两个'T's具有相同的物理尺寸？CSS像素字体大小的一致性

编辑：是的，我正在使用媒体查询。我不想进入血淋淋的细节，但我通过提及使用CSS像素比例来暗示它。假设我在某种程度上奇迹般地能够获得客户端显示器的DPI和CSS像素比例。

感谢您的洞察！

来源

2012-09-03 void-pointer

乖乖，我的老天爷。我哦，我的。 –

确保每个人都使用相同的显示器。 –

@MikeB对，但我不应该通过DPI缩放来纠正这个问题吗？可以理解的是，在不同浏览器中使用相同像素值声明的字体大小应该存在细微差异。不过，我在两种情况下都使用Safari。 –

我认为这个必须完成的概念是媒体查询，没有提到你正在使用媒体查询来做这件事。您可以使用媒体查询，以获得所需的效果同时针对iPhone以及iOS版：

更是here

来源

2012-09-03 04:07:18 defau1t

我正在使用媒体查询，但我不想进入血淋淋的细节。我在我的问题中提到了CSS像素比例，暗示了这一点。 –

我将其标记为媒体查询以吸引相关观众。 – defau1t

CSS像素字体大小的一致性

回答

相关问题