Pixel to MM equation?

问题:

Is there a reliable equation to work out pixel size to MM? Or is that not possible cross device?

We are working with a bespoke system that delivers content to many devices with different screen sizes, it can detect the screen width in MM, but we would like to accurately convert this to pixel size to deliver correctly sized images dynamically using a simple jquery script!?

Any ideas?

Cheers Paul

回答1:

What i did :

 <div id="my_mm" style="height:100mm;display:none"></div>

Then:

var pxTomm = function(px){   
   return Math.floor(px/($('#my_mm').height()/100)); //JQuery returns sizes in PX
 };

回答2:

tl;dr: If you don't know the DPI of the device, you won't be able to deduce how big the pixel is in the real-world.

---

Pixels on their own are not real-world units of measurement.

They can become a real-world measurement if you take into account the DPI value of the device that displays them.

The formula is:

• mm = ( pixels * 25.4 ) / DPI

So 8 pixels viewed on a 96-DPI screen setting:

• ( 8 * 25.4 ) / 96 = 2.116mm

All this assuming the device is not scaled/zoomed.

回答3:

You would need to know the DPI of the device and if the display is scaled or not. That would mean that you would have to have a database of the physical screen dimensions and screen resolutions of each device.

回答4:

You cannot reliably calculate this since there is no way to detect physical screen size.

回答5:

old post but I stumbled upon this today and had to make it work.

the trick is to create an element with dimensions styled in inches and request its width, this will give you the px per inch.

 function inch2px(inches) {
                $("body").append("<div id='inch2px' style='width:1in;height:1in;display:hidden;'></div>");
                var pixels = $("#inch2px").width();
                $("#inch2px").remove();

                return inches * pixels;
            }

            function px2inch(px) {
                $("body").append("<div id='inch2px' style='width:1in;height:1in;display:hidden;'></div>");
                var pixels = $("#inch2px").width();
                $("#inch2px").remove();

                return px / pixels;
            }

now if you need millimetres, just do px2inch(10)*25.4.

回答6:

Based on the @Dawa answer above, this is my solution:

var mmToPx = function(mm) {
    var div = document.createElement('div');
    div.style.display = 'block';
    div.style.height = '100mm';
    document.body.appendChild(div);
    var convert = div.offsetHeight * mm / 100;
    div.parentNode.removeChild(div);
    return convert;
};

Just note that the 100mm height, will give you a better precision factor. The calculation will be instant and the div will not be visible. No need for jQuery

回答7:

i use this simple function

function pix2mm(val,dpi){
    return (val/0.0393701)/dpi;
}

test outputs it 300,600,900 DPI

var r = pix2mm(100,300);  // converting 100 pixels it 300 DPI 
console.log(r);  // output : 8.4 mm
var r1 = pix2mm(100,600);  // converting 100 pixels it 600 DPI
console.log(r1);  // output : 4.2 mm
var r2 = pix2mm(100,900);  // converting 100 pixels it 900 DPI
console.log(r2);  // output : 2.8 mm

DEMO : https://jsfiddle.net/xpvt214o/29044/