CSS - независимый от плотности пикселей дизайн, CSS-пиксель на 50% больше на рабочем столе
Я провел много исследований в Интернете, и я все еще не уверен, как справиться с различными плотностями экрана в моем веб-приложении. Единственный полезный вопрос и ответ на этом сайте, который я нашел, заключается в следующем: Получение физических размеров экрана / точек на дюйм / плотности пикселей в Chrome на Android
Согласно ответу с наивысшим рейтингом, "50 пикселей должно выглядеть примерно одинаково на всех мобильных устройствах, оно может немного отличаться, но CSS Pixel - это независимый от нашего устройства способ создания согласованных документов и интерфейсов"
Это правда? Может быть, для большинства мобильных устройств это правда, я протестировал свое приложение на 2 мобильных телефонах, один с 144ppi и другим 288ppi, и это выглядело примерно так же. Но на рабочем столе, однако, он намного больше. CSS-пиксель примерно на 50% больше на рабочем столе. Это проблема, потому что даже если у вас есть отдельный дизайн для больших и маленьких экранов, есть много мобильных устройств, которые следует рассматривать как большой экран, например планшет в ландшафтном режиме. Допустим, вы разрабатываете что-то для настольного компьютера, но разочаровываетесь, что на планшетах это выглядит на 50% меньше.
Мне кажется, что-то не так с соотношением пикселей устройства. Я использовал этот сайт для проверки своих экранов: https://bjango.com/articles/min-device-pixel-ratio/ Экран ноутбука составляет 96 точек на дюйм, -webkit-min-device-pixel-ratio=1.0 Смартфон имеет 144 точки на дюйм и пиксель устройства соотношение составляет 1,5
Таким образом, теоретически, согласно этой информации, элемент должен выглядеть одинаково на мобильном телефоне. 144/1,5=96 Но это не так. Это как DPR не работает должным образом.
Update1: я нашел это на MDN
Коэффициент по умолчанию зависит от плотности отображения. На дисплее с плотностью менее 200 точек на дюйм соотношение составляет 1,0. На дисплеях с плотностью от 200 до 300 точек на дюйм соотношение составляет 1,5. Для дисплеев с плотностью более 300 точек на дюйм это целое число (плотность /150 точек на дюйм). Обратите внимание, что коэффициент по умолчанию равен true, только если масштаб области просмотра равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.
Я не знаю, применимо ли оно ко всем устройствам, но в моем примере это так. Это очень плохо. Разница в 50% огромна. Я не могу поверить, что в Интернете нет ничего лучше, чтобы предложить. Также странно, что соотношение webkit-min-device-pixel-коэффициент показывает 1,5, но на самом деле это 1,0
Обновление 2:
Итак, я начинаю щедрость. Мне просто нужны ответы, лучшие практики, другие возможные случаи диспропорций в пикселях CSS, некоторые ссылки. Все, что могло бы помочь мне в этой ситуации.
Позвольте мне изложить мою конкретную проблему еще раз. Я получил кроссплатформенное веб-приложение, которое должно работать на настольных компьютерах, мобильных телефонах и планшетах. Из-за разной плотности пикселей каждый элемент приложения выглядит примерно на 50% больше на экране ноутбука с разрешением 96 точек на дюйм, чем на мобильном устройстве (144 точки на дюйм). Одна вещь, которая меня действительно интересует, - это то, почему, хотя для этого устройства window.devicePixelRatio=1.5, браузер обрабатывает его так, как будто оно было 1.0 (в противном случае оно выглядело бы так же, как на рабочем столе).
Я использую один дизайн для рабочего стола и планшета, разрешение не имеет значения на самом деле. Мое веб-приложение автономно, поэтому пользователь настольного компьютера может установить ширину окна, равную 800 пикселей. Но на настольном компьютере все будет слишком большим по сравнению с планшетом. Мне придется установить разные размеры для элементов на планшете и на рабочем столе. Одна вещь, которая приходит мне в голову, - это использование медиазапроса (min-device-pixel-ratio: 1.5), чтобы установить стиль для мобильных устройств.
Таким образом, я получил возможное решение, но я хотел бы узнать больше о несоответствиях пикселей CSS. Это относится только к мобильному или настольному компьютеру или есть еще проблемы? Мне кажется, что на мобильных устройствах все более или менее одинаково, но я не могу это проверить. Я хотел бы немного обсудить тему, другие возможные обходные пути, лучшие практики, некоторые ресурсы. Я искал и не мог ничего найти в Интернете. Все просто говорят: "CSS-пиксель - это наш независимый от плотности пиксель", но вот истина:
2 ответа
Разница в размерах дизайн. Мобильные устройства, как правило, смотрятся ближе к глазу, и из-за меньшего размера экрана больше нужно втиснуть в меньшее пространство.
Проблема в том, что компьютер может даже не знать размер экрана или одно и то же изображение может быть отражено на двух разных экранах - например, на мониторе вашего ноутбука и проекторе - где размер, очевидно, отличается. Кроме того, большинство компьютеров и некоторые мобильные телефоны допускают масштабирование элементов экрана, что также влияет на размер элементов на вашем веб-сайте. Кроме того, вам бы не хотелось, чтобы значок был размером 2 на 2 см как на телефоне, так и на огромном проекторе или 50-дюймовом телевизоре.
Но даже если бы вы по какой-то причине захотели, к сожалению, нет способа заставить ваш контент воспроизводиться с одинаковыми измерениями реального мира на всех устройствах. Единицы как mm, cm, in, pt а также pc приведет к крайне противоречивым результатам и не должен использоваться для контента, предназначенного для экранов.
Для адаптивных сайтов, вы должны использовать <meta name="viewport" content="width=device-width, initial-scale=1"/> метатег, если вы собираетесь использовать px единицы. Это обеспечит правильное масштабирование сайта. Это, однако, не делает пиксели CSS одинаковыми по размеру на всех устройствах, и это также не собирается. Браузер будет просто учитывать размер устройства и разрешение устройства при выборе размера пикселя CSS и не будет пытаться изменить его размер, чтобы он соответствовал настольному сайту на мобильном телефоне. Это метод, который я лично предпочитаю и нахожу мои кроссплатформенные веб-приложения масштабируемыми, как и предполагалось, на разных устройствах.
Еще один вариант использования вышеупомянутого meta tag будет использовать em или же rem иметь элементы в масштабе страницы по отношению к устройству font size, В то время как em а также rem обратиться к текущему element а также root elementfont-sizes соответственно эти единицы можно использовать по другим правилам, таким как width а также padding чтобы они масштабировались по отношению к размеру шрифта, установленному продавцом. Это работает, потому что разные устройства будут иметь разный размер шрифта по умолчанию для корневого элемента (как правило, больший шрифт для большей плотности пикселей, чтобы обеспечить примерно постоянный размер шрифта). Таким образом, используя em а также rem будет соответственно масштабироваться - если, конечно, вы не перезапишите его в своем CSS с абсолютным значением. Хоть rem (rootfont size) удобнее в некоторых сценариях, обратите внимание, что это поддерживает только новейший Internet Explorer.
Естественно единицы просмотра vw , vh , vmin а также vmax может оказать большую помощь при создании масштабируемого контента. Это, однако, не поможет вам создавать контент.
В заключение, если бы я был вами, меня бы не волновало стремление сделать элементы одинакового размера на всех мониторах; это квест напрасный. Мало того, что вы не добьетесь успеха, но даже если бы вы сделали, юзабилити вашего сайта пострадает.
Я бы не стал слишком зацикливаться на соотношении пикселей, оно действительно имеет отношение только к событиям на расстоянии касания. С адаптивными макетами, px единицы лучше всего подходят для растровых изображений и псевдоэлементов, которые нуждаются в смещении. Гораздо лучше использовать такие масштабируемые единицы, как %,em,vh,vw и т. д. для адаптивных макетов устройства.
Вы можете обеспечить постоянный масштаб, используя em единицы для элементов, которые нуждаются в масштабировании, добавив эту строку кода.
document.body.style.fontSize = (document.body.offsetWidth * .282) + '%';
.282 нормализует значение до приемлемого значения, fontSize будет относительно ширины устройства и будет влиять на все элементы, которые используют em блок для калибровки.