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

Poly

are you saying that you already have the screen width in MM? and you just need the width of the screen in pixels? – Getaway

yes 32bitkid, thats what I need – Poly

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

Professional

This is one of the best and the most reliable solution not sure why this was not voted till now, Thanks @Professional for this brilliant solution – Jerrybuilt

Additional Notes: The value reported by .height() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .height(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery. source: api.jquery.com/height – Picador

Also note that using 1mm will result in an inaccurate, rounded, conversion. It is better to set the element's height to 100mm, and then divide the return value of $.height by 100 before plugging it into that formula. – Spartacus

The value is not consistent. As @Spartacus pointed out, setting the height to 100mm may get more accurate value. While testing I got 1mm = 4px (when using height as 1mm) and 1mm = 3.78px (when setting height as 100mm). – Kinematics

Updated with @Spartacus fix – Professional

clever solution! – Tajo

I add a <div id="my_mm" style="height: 100mm; width: 100mm;"></div> element, however, when I use a ruler to measure it, it's only 73mm. What's the problem ? – Stamps

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.

Ticking

Best answer for the question. – Sayed

The constant 25.4 is simply the amount of millimeters in an inch – Emaemaciate

Answer 3

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.

Transferase

Answer 4

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

Trinetta

Answer 5

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

Symptom

Answer 6

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.

Rimma

Which is obviously not very practical. – Malt

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

Premonish

Answer 8

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

Sears

Sorry - the supplied MM size is accurate as it uses a database of known screen widths to provide the data via comparison of user agent rather that anything script based. – Poly

Answer 9

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

Woeful