Question

考虑以下HTML：

<!DOCTYPE html>
<html>
    <body>
        <span style = "font-size: 0.5in;">1/2"</span>
        <br>
        <span style = "font-size: 1in;">1"</span>
        <br>
        <span style = "font-size: 2in;">2"</span>
        <br>
    </body>
</html>

在桌面计算机上，这似乎与请求的大小足够接近。但在我尝试过的所有移动浏览器（Firefox，Chrome，Opera）上，它都要小得多（约为规格尺寸的25％）。这是为什么？我认为一英寸应该是一个相当明确的测量，但显然不是！它有什么办法吗？而且为了清楚起见，我确实意识到通常不建议使用绝对字体大小，我只是想找到一种方法来实现这一点以供将来参考。

谢谢！

修改

我想我已经找到了解决方案。将这个元标记放在元素中似乎有效（大多数时候，无论如何 - Opera仍然忽略了请求）：

<meta name="viewport" content="width=device-width, user-scalable=no">

修改

对不起，我错了，这并没有像预期的那样完全正常工作。字体肯定更大，大约是所要求大小的50％，但我仍然更喜欢它们是否接近100％。所以，还是一个悬而未决的问题我会继续自己研究，但任何意见都会受到赞赏。

顺便说一下，比上面更好的元标记可能是：

<meta name="viewport" content="width=device-width, user-scalable=yes">

因为阻止用户缩放文字真的没有意义......

Answer 1

CSS中的一英寸总是96像素（*）。正如Screenshot of the xpath所说，

单位in不代表屏幕上的实际英寸，而是代表96px。这意味着无论实际屏幕像素密度如何，都假定为96dpi。

因此，如果你碰巧有一台96 DPI显示器，显示器上只有一英寸一英寸。但是，如果您有120 DPI监视器，则结果会更小。

就是这样。

移动设备的平均像素似乎较小，因此在许多移动设备上，结果会更小。例如，三星Galaxy 6S有144 DPI（*），这将使CSS英寸小到真实英寸的2/3。

好消息是，根据同一个MDN页面，Firefox有一个名为mozmm的单位，即一个物理毫米。那么<span style = "font-size: 12.7mozmm;">1/2"</span>就会完全符合您的要求你可以猜出坏消息。

（*）现在大多数移动设备每个逻辑像素都有多个硬件点，但不要让你感到困惑。像素不是硬件点，简单就是这样。三星提到每英寸有577个点，但我们不在CSS中使用点，好吗？

实施＆＃34;确切＆＃34;的浏览器渲染字体大小？

1 个答案: