网络和物理单位 [英] Web and physical units

问题描述

有没有办法告诉/设置一个元素有多少毫米，它适用于各种设备?

例如，我想创建一个 100 x 100 毫米的白色窗口，中间有一个 10 x 10 毫米的黑色正方形，它在台式机、平板电脑、打印设备上都有这些尺寸......

我不介意使用最新的浏览器，但它必须使用 HTML/JS/CSS.

PS:相关:有没有办法判断屏幕有多少毫米?

编辑

换句话说，问题在于使用像 pt、mm、cm 等 CSS 单位不起作用，因为浏览器供应商决定将 96 DPI 硬编码到代理中，根据 这里.有什么办法可以在网络上获得真实的物理尺寸吗?

解决方案

并非如此.

理论上，您可以使用 mm 单位设置长度，但这需要浏览器准确处理显示器的 DPI ……浏览器倾向于假设一个固定值，而不是获取真实值.

如果可行，那么您可以通过创建一个已知物理尺寸的屏幕外元素，使用 JavaScript 读取像素尺寸并使用该比率将任何其他元素的像素尺寸转换为毫米来获得该单位的宽度.

在实践中，如果您需要准确的测量值，您几乎只能在屏幕上画一些东西并要求用户用尺子测量它以获得您的比例.

或者，如果您可以识别正在使用的特定设备(对于某些设备，用户代理字符串可能会告诉您)，并且您保留这些设备物理尺寸的数据库(因此这仅限于手机的子集和平板电脑，如果它们连接到外部显示器将无法工作)您可以使用它来确定尺寸.

Is there a way to tell/set, how many millimeters an element has, which works across various devices?

For example, I would like to create a white window which is 100 x 100 mm, with a black 10 x 10 mm square in the middle, which would have those dimensions on desktop, tablet, print, ...

I don't mind to use very latest browser but it has to use HTML/JS/CSS.

PS: Related: is there a way to tell, how many millimeters the screen has?

Edit

In other words, the problem is that using CSS units like pt, mm, cm, ... does not work as browser vendors decided to hardcode 96 DPI into the agents, according to here. Is there anything one can do to get real, physical, dimensions on web?

解决方案

Not really.

In theory you can set lengths using mm units, but this requires that the browser accurately handles the DPI of the display … and browsers tend to assume a fixed value instead of getting the real one.

If that worked, you could then get the width in that unit by creating an off-screen element of known physical dimensions, reading the pixel dimensions using JavaScript and using that ratio to convert the pixel dimensions of any other element to mm.

In practice, if you need accurate measurements you are pretty much limited to drawing something on screen and asking the user to measure it with a ruler to get your ratio.

Alternatively, if you can identify the specific device in use (which the User Agent String may tell you for some devices) and you keep a database of the physical sizes of those devices (so this is limited to a subset of phones and tablets and won't work if they are connected to an external display) you could use that to determine the dimensions.

这篇关于网络和物理单位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！