Как смоделировать измерения реального мира в CSS? - PullRequest
Новая
       96

Как смоделировать измерения реального мира в CSS?

0 голосов
/ 31 мая 2018

Я хочу создать веб-сайт, на котором объект, который имеет ширину, например, 100 мм , отображается с такой шириной независимо от разрешения монитора или смартфона.

По этой причине я прошу пользователя указать его размеры дисплея, чтобы вычислить правильные значения ppi .Однако это не работает на всех устройствах.

РЕДАКТИРОВАТЬ: Это код, который я до сих пор: 

var dpr = window.devicePixelRatio;
var inch = 25.4;

var pixelHeight = screen.height * dpr;
var pixelWidth = screen.width * dpr;

function calculatePpi(monitorDiagonal) {
    return (Math.sqrt(Math.pow(pixelWidth, 2) + Math.pow(pixelHeight, 2))) / monitorDiagonal;
}

function mmToPx(mm) {
    return  (((mm / inch) * calculatePpi(monitorDiag)));
}

1 Ответ

0 голосов
/ 31 мая 2018

Использовать высоту и ширину css.

Высота и ширина могут быть установлены на автоматический (это значение по умолчанию. Означает, что браузер вычисляет высоту и ширину) или могут быть указаны в значениях длины, например, px,см и т. д., или в процентах (%) от содержащего блока.

Так, например, если вы хотите показать элемент шириной 35 см и высотой 50 см, вы можете установить его с помощью css: 

#example {
  height: 50cm;
  width: 35cm;
}

Удачи!

Кажется, что, хотя это должно работать, это не достаточно точно.Смотрите комментарии.

...