Как смоделировать размеры реального мира в CSS?
Я хочу создать веб-сайт, где объект, который, например, имеет ширину 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)));
}
@Luca Я думаю, что Кодан пытается создать линейку, и все, что он просит, это сделать ее горячо, установив ее на 100mm - точнее, на 100mm на всех устройствах.
Что ж, это невозможно по причинам, которые вы указали в своем сообщении. ppi.
Размеры, указанные производителем, часто включают в себя внешние поля, поэтому эта информация вводит в заблуждение. Кроме того, 90% пользователей не знают, что такое разрешение, поэтому полагаться на то, что они говорят вам, чтобы заставить все работать, наверняка окажется проблематичным.
@ RokoC.Buljan Это именно то, что я пытаюсь сделать.
Вы пробовали посмотреть, как это делает mydevice.io? Видимо может угадать ваш dpi.
Тогда это может быть дубликат stackoverflow.com/questions/36600114/…
@JoeWarner Ну, а как же тогда линейка это работает?
@Codan Так называемые абсолютные единицы измерения (см, мм, дюйм, pt и pc) означают в CSS то же самое, что и везде, но только если ваше устройство вывода имеет достаточно высокое разрешение. На лазерном принтере 1 см должен быть ровно 1 сантиметр. Но на устройствах с низким разрешением, таких как экраны компьютеров, CSS этого не требует. И действительно, результат имеет тенденцию отличаться от одного устройства к другому.
Я бы сказал, что код mydevice.io содержит все, что вам нужно, по-видимому, у них есть база данных с информацией для каждого устройства, и они были достаточно любезны, чтобы сделать эти таблицы доступными.
@Havenard хорошая находка, но опять же, похоже, не работает правильно при использовании внешнего монитора, подключенного к розетке ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используйте высоту и ширину css.
Для высоты и ширины можно задать значение «Авто» (это значение по умолчанию. Означает, что браузер вычисляет высоту и ширину), или указать значения длины, такие как пиксели, см и т. д., Или в процентах (%) содержащего блока. .
Итак, если, например, вы хотите показать элемент шириной 35 см и высотой 50 см, вы можете установить его с помощью css:
#example {
height: 50cm;
width: 35cm;
}
Удачи!
Кажется, что хотя это и должно работать, но это недостаточно точно. См. Комментарии.
Вы хотите сказать, что высота 50cm будет соответствовать реальной 50cm на всех устройствах?
Это то, что я понимаю, когда читаю на нем документацию. Почему? Вы знаете что-нибудь еще? Поделись, пожалуйста
Нет, я просто спрашиваю вас и проясняю, что вы правильно поняли вопрос, поскольку вы не указали в своем ответе, например: «Да, вы можете быть уверены, что 1cm или 10mm будут такими же, как в реальном мире - на всех устройствах». - это то, что я никогда не исследовал, но думал о нем пару дней назад: D
Я поддержал ваш комментарий, так как вы заставили меня снять метр и измерить экран. Работает с 5 см (-:
5см минус 1,5мм. Я снова читаю документы. Может дело не только в css.
«Однако это работает не на всех устройствах». вопрос работает не на всех устройствах? Поделитесь с нами своим кодом ...