gpt4 book ai didi

html - 强制浏览器呈现 "exact"字体大小?

转载 作者:行者123 更新时间:2023-11-28 02:48:20 25 4
gpt4 key购买 nike

考虑以下 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">

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

最佳答案

CSS 中的一英寸始终为 96 像素 (*)。作为MDN把它,

The unit in doesn't represent a physical inch on screen, but represents 96px. That means that whatever is the real screen pixel density, it is assumed to be 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 中使用点,好吗?

关于html - 强制浏览器呈现 "exact"字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40578652/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com