Есть ли надежное уравнение для определения размера пикселя для ММ? Или это невозможно перекрестное устройство?
Мы работаем с заказной системой, которая доставляет контент на многие устройства с разными размерами экрана, и может определять ширину экрана в MM, но мы хотели бы точно преобразовать это в размер пикселя, чтобы динамически отображать изображения с использованием простого сценария jquery!?
Есть идеи?
Cheers Paul
Что я сделал:
<div id="my_mm" style="height:100mm;display:none"></div>
Затем:
var pxTomm = function(px){
return Math.floor(px/($('#my_mm').height()/100)); //JQuery returns sizes in PX
};
tl; dr: Если вы не знаете DPI устройства, вы не сможете определить, насколько велик пиксель в реальном мире.
Пиксели сами по себе не являются реальными единицами измерения.
Они могут стать реальным измерением, если принять во внимание значение DPI устройства, которое их отображает.
Формула:
mm = ( pixels * 25.4 )/DPIИтак, 8 пикселей просматриваются при настройке экрана 96-DPI:
( 8 * 25.4 )/96 = 2.116mmВсе это при условии, что устройство не масштабируется/масштабируется.
Вам нужно будет узнать DPI устройства и если масштаб масштабируется или нет. Это означало бы, что вам понадобится база данных физических размеров экрана и разрешения экрана для каждого устройства.
Вы не можете надежно вычислить это, так как невозможно определить размер физического экрана.
но я наткнулся на это сегодня и должен был заставить его работать.
трюк состоит в том, чтобы создать элемент с размерами в дюймах и запросить его ширину, это даст вам пиксели на дюйм.
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;
}
теперь, если вам нужны миллиметры, просто сделайте px2inch(10)*25.4.
Нет необходимости в 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
Обратите внимание, что значения в пикселях зависят от того, какое разрешение сообщает вам браузер устройства. Некоторые браузеры (на некоторых телефонах) лгут об этом и сообщают вам нечто иное, чем фактическое разрешение экрана, в попытке совместимости со старыми сайтами. Главное - никогда не переносить значения преобразования с одного устройства на другое, а всегда использовать вычисления в реальном времени. Даже на рабочем столе пользователь может изменить разрешение экрана.
Чтобы узнать больше о юнитах, ознакомьтесь с этой (короткой) статьей на W3:
Основываясь на ответе @Dawa выше, это мое решение:
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;
};
Просто отметьте, что высота 100 мм даст вам лучший прецизионный коэффициент. Расчет будет мгновенным, и div не будет виден. Нет необходимости в jQuery
я использую эту простую функцию
function pix2mm(val,dpi){
return (val/0.0393701)/dpi;
}
тестовые выходы 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