javascript - 网络和物理单位

标签 javascript html css layout web

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

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

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

PS:相关:有没有办法告诉,屏幕有多少毫米?

编辑

换句话说,问题在于使用 pt、mm、cm 等 CSS 单位...不起作用,因为浏览器 vendor 决定将 96 DPI 硬编码到代理中,根据 here .有什么办法可以在 Web 上获得真实的、物理的维度吗?

最佳答案

不是真的。

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

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

在实践中,如果您需要准确的测量值,您只能在屏幕上绘制一些东西并要求用户用尺子测量它以获得您的比率。

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

关于javascript - 网络和物理单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18483955/

相关文章:

javascript - 处理 Bootstrap 翻转卡中的点击事件

html - 如何让这个 div 显示在顶部 div 之上

jquery - 提交后更改提交按钮上的文本

html - 单击并按住鼠标与单击鼠标一次

css - 不同浏览器上的视差滚动图像

javascript - 防止空白输入不起作用

javascript - 将数组添加到另一个数组

css - 如何从我的网站 html 中删除空白区域

javascript - 带有 Meteor 的通用 session 变量键模板助手

css - 具有不同边距颜色和居中内容的网页