如何在CSS/JavaScript中模拟实际尺寸 [英] How emulate real size dimensions in css/javascript

问题描述

我需要在Web应用程序上显示其实际大小的对象.如果对象的宽度为85mm，那么它也应该在屏幕上显示(ipad 1,2,3和android).我试图在CSS中以mm为单位设置图像，但是没有用.有什么建议吗?

I need to display an object with its real size on a web app. If an object has 85mm width, so should it also be displayed on the screen (ipad 1,2,3 and androids). I tried to set the images in mm units in the css, but it didn't work. Any suggestions?

推荐答案

如@feeela所述，cm，in，mm等单位与现实生活中的尺寸不符.也没有办法获取特定的设备DPI，最接近的是 window.devicePixelRatio 属性.解决问题的一种方法是使用 Detector 之类的外部库来确定用户所在的确切设备，然后如维基百科中所列，为其分配任何硬编码的像素密度.一旦有了密度，您就可以轻松地将任何尺寸转换为所需的尺寸.例如，在Ipad3上:

As @feeela mentioned, the cm, in, mm, etc units do not correspond to real life dimensions. There is also no way to get the specific device DPI, the nearest you get is the window.devicePixelRatio property. One way to solve the problem would be using external libraries like Detector to determine the exact device the user is in and then assign any hard coded Pixel density to it as listed in wikipedia. Once you somehow have the density you can easily convert any dimension to the desired size. For example, on an 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);

我希望它可以帮助遇到相同问题的任何人……

I hope it helps anybody with the same problem…

这篇关于如何在CSS/JavaScript中模拟实际尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！