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

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

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

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

Answer 4

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 5

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

Answer 6

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 7

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 8

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/