Pixel to MM equation?

Question

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

Answer 1

No need for jQuery.

function xToPx(x) {
    var div = document.createElement('div');
    div.style.display = 'block';
    div.style.height = x;
    document.body.appendChild(div);
    var px = parseFloat(window.getComputedStyle(div, null).height);
    div.parentNode.removeChild(div);
    return px;
}


pixels = xToPx('10cm'); // convert 10cm to pixels
pixels = xToPx('10mm'); // convert 10mm to pixels

Please notice that values in pixels are depending on what resolution the browser of the device tells you. Some browsers (on some phones) lie about this and tell you something different than the actual screen resolution in an attempt to be compatible with older sites. Main important thing is to never port conversion values from one device to another but always use real-time calculations. Even on a desktop the user can change the screen resolution.

To learn more about the units, check out this (short) article on W3:

https://www.w3.org/Style/Examples/007/units.en.html

Answer 2

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

Answer 3

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/

Answer 4

Late but may be useful. 1 px = 0.26458333333719 mm

Milli Meter Pixel 1 mm = 3.779527559 px

So if you have lets say 10px. It will be equal to 10 * 0.26458.. = 2.64mm ref : https://everythingfonts.com/font/tools/units/px-to-mm Enjoy :)

Answer 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.

Answer 6

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
 };