Question

我需要在网络应用上显示其实际大小的对象。如果一个物体的宽度为85mm，那么它也应该显示在屏幕上（ipad 1,2,3和androids）。我试图在css中以mm为单位设置图像，但它不起作用。有什么建议吗？

Answer 1

关于MDN的这一陈述读取它应该适用于具有高分辨率的设备：

对于低dpi设备，单位px表示物理参考像素，其他像素相对于它定义。因此，1in定义为96px，等于72pt。这个定义的结果是，在这样的设备上，以英寸（in），厘米（cm），毫米（mm）为单位描述的长度不一定与具有相同名称的物理单元的长度相匹配。

对于高dpi设备，英寸（in），厘米（cm），毫米（mm）被定义为它们的物理对应物。因此，px单位是相对于它们定义的（1/96英寸）。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/length

然后还有mozmm - »一个实验单元，无论显示器的大小或分辨率如何，都会尝试精确渲染一毫米。«（请参阅上面的链接。）

Answer 2

正如@feeela所提到的，cm，in，mm等单位与实际尺寸不对应。也无法获取特定设备DPI，最接近的是window.devicePixelRatio属性。解决此问题的一种方法是使用Detector之类的外部库来确定用户所在的确切设备，然后为wikipedia中列出的任何硬编码像素密度分配。一旦你以某种方式获得密度，你可以轻松地将任何尺寸转换为所需的尺寸。例如，在Ipad3上：

var dpr     = window.devicePixelRatio;
var inch    = 25.4; //1inch = 25.4 mm
var ppi     = 264; //Ipad3 density

function mmToPx(mm){
    return ((mm/inch)*ppi)/dpr;
}

myElement.width = mmToPx(size_in_mm);

我希望它可以帮助任何有同样问题的人......

如何在css / javascript中模拟实际大小的维度

2 个答案: