Хорошо. Это старый, но веселый.
Я знаю, что у нас есть 1in физическая единица, сопоставленная с 96px на экране dpi. Это отображение появилось еще в 90-х годах, когда мониторы / экраны имели гораздо более низкое разрешение. Это было другое время. Интернет тогда был утилитой «только для настольных компьютеров», и, как можно было бы предположить, сегодняшние реализации не поспевают за новым сетевым ландшафтом .
Около 2020 года.
I хочу объявить css переменную --inch на :root моей веб-страницы и отобразить ее в абсолютных дюймах для различных устройств с помощью медиазапросов. Я могу сделать это на устройствах, которыми я владею, например, так:
/* css */
:root {
--inch: 130px; /* this value is from my Macbook Pro 2017 for example. */
}
.square {
width: var(--inch);
height: var(--inch);
background: red;
}
А затем с помощью линейки я измерил размеры квадрата на экране. Я даже сделал codepen для этого, чтобы протестировать и сравнить абсолютный дюйм с единицей in, поддерживаемой вашим браузером / машиной.
Сейчас. Как мы должны go настроить --inch переменную для мобильных устройств, часов, iPad, настольных компьютеров и, если возможно, для телевизоров и проекторов?
ОБНОВЛЕНИЕ 1: Немного прибил прицел.
Следующие media-queries охватывают широкий выбор экранов, доступных на рынке. Этот список за 2013 год ( кредиты ) и может быть не исчерпывающим, но может быть улучшен:
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
ОБНОВЛЕНИЕ 2:
Обрабатывается следующий пункт Например, отображение пикселей в --inch для всех MBP сетчатки в 2017 году.
@media (resolution: 192dpi) and (-webkit-device-pixel-ratio: 2) {
:root {
--inch: 130px;
}
}
.square {
width: var(--inch);
height: var(--inch);
background: orangered;
}
Где переменная --inch подразумевает измерение реального физического дюйма. Обратите внимание, что мы не используем min / max для медиа-запросов, чтобы вписаться в диапазон экранных dpis. Это отображение точно для MBP'17 только с возвращенным dpi 192 и dpr 2.