【发布时间】：2012-09-03 12:12:32
【问题描述】：
假设我想渲染两个大写的“T”，两个都精确地一英寸高。一个“T”在配备 Retina 显示屏的 Macbook Pro（220 DPI，CSS 像素比 2）上渲染，另一个在 iPhone 4S（326 DPI，CSS 像素比 2）上渲染。为此，我将 Macbook Pro 上的字体大小设置为 220 / 2 = 110px，将 iPhone 4S 上的字体大小设置为 326 / 2 = 163px。但是，两个 'T's are still not the same size。为什么？另外，我该怎么做才能确保两个“T”的物理尺寸相同？
编辑：是的，我正在使用媒体查询。我不想深入细节，但我通过提到 CSS 像素比的使用来暗示它。假设我在所有情况下都能神奇地获得客户端监视器的 DPI 和 CSS 像素比。
感谢您的洞察！
【问题讨论】：
-
确保每个人都使用同一台显示器。
-
@MikeB 对，但我不应该通过 DPI 缩放来纠正这个问题吗？可以理解的是，在不同浏览器中使用相同像素值声明的字体大小应该存在细微差异。但是，我在这两种情况下都使用 Safari。
-
如果我在浏览器中增加文本放大率会怎样？
-
@MattBall 如果我使用不应该工作的像素值（至少在我的理解中）。在这种情况下，假设所有用户都没有使用文本缩放。
-
如果我有一个 100px 大的盒子，我放大到 2:1，那么你是说盒子还是 100px 大？我觉得你的数学有点搞砸了。
标签： html css fonts media-queries font-size