Как установить физические размеры (например, фактические дюймы) для элементов?

Question

Моя конечная цель - отобразить изображение того же точного размера на каждом экране (да, мне действительно нужно это для чего-то).

Я начал читать о том, как получить размер экрана пользователя here - и ответ кажется, что это невозможно (без вызова API, который пытается угадать фактическое устройство на основе некоторых параметров).

Я тогда вспомнил, что у css есть физические единицы измерения для определения размеров элементов и решил протестировать на моем экране. Я установил размеры примерно так:

<div style = "background-color:black; height: 5in; width: 3in;"></div> 

, а затем положить физический «х 5» (7,6 см х 12.7cm) 3 флэш-карту по отношению к экрану.

Это было значительно не по размерам.

Замечательное примечание - размер установки в мм был смехотворно выключен - я ожидал получить те же результаты, что и в дюймах.

С учетом сказанного, есть ли способ сделать то, что мне нужно?

Answer 1

В CSS один дюйм не равен одному физическому дюйму. Он равен 96px.

Этот раздел спецификации может помочь вам:

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

Абсолютные единицы измерения длины фиксированы по отношению друг к другу и якорь к некоторому физическому измерению.

Если якорный блок является пиксельным блоком, физические устройства могут не соответствовать их физическим измерениям.

В качестве альтернативы, если блок якоря является физическим устройством, пиксельный блоком не может отобразить до целого числа пикселей устройства