CSS - независимый дизайн плотности пикселей, пиксель CSS на 50% больше на рабочем столе

Я провел много исследований в Интернете, и я все еще не уверен, как справляться с разной плотностью экрана в моем веб-приложении. Единственный полезный вопрос и ответ на этом сайте, который я нашел, это следующее: Получение размера физического экрана/dpi/плотности пикселей в Chrome на Android

Согласно наивысшему рейтингу, "50 пикселей должны выглядеть примерно одинаково на всех мобильных устройствах, это может немного измениться, но CSS Pixel - наш независимый от устройства способ создания согласованных документов и пользовательских интерфейсов"

Это правда? Возможно, для большинства мобильных устройств это правда, я протестировал свое приложение на 2 мобильных телефонах, один с 144ppi и другими 288ppi, и он выглядел примерно так же. Но на рабочем столе, однако, он намного больше. Пиксель CSS примерно на 50% больше на рабочем столе. Это проблема, потому что даже когда у вас есть отдельный дизайн для больших и маленьких экранов, существует множество мобильных устройств, которые следует рассматривать как большой экран, например, планшет в ландшафтном режиме. Итак, скажем, вы создаете что-то для рабочего стола, только чтобы быть разочарованным, что он выглядит на 50% меньше на планшетах.

Мне кажется, что что-то не так с отношением пикселей устройства. Я использовал этот сайт для проверки своих экранов: https://bjango.com/articles/min-device-pixel-ratio/ Экран ноутбука 96dpi, -webkit-min-device-pixel-ratio = 1.0 Смартфон - 144dpi, а соотношение пикселей устройства - 1,5.

Таким образом, теоретически, согласно этой информации, элемент должен отображаться на мобильном. 144/1,5 = 96 Но это не так. Он как DPR работает неправильно.

Update1: Я нашел это на MDN

Отношение по умолчанию зависит от плотности дисплея. На дисплее с плотность менее 200dpi, отношение 1,0. На дисплеях с плотностью от 200 до 300 точек на дюйм, отношение равно 1,5. Для дисплеев с плотностью более 300 точек на дюйм, отношение представляет собой целостный пол (плотность/150dpi). Заметка что коэффициент по умолчанию равен true, только если масштаб просмотра равен 1. В противном случае связь между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Я не знаю, все ли это применимо ко всем устройствам, но в моем примере это похоже. Это очень плохо. 50% разница огромна. Я не могу поверить, что в Интернете нет ничего лучшего. Странно и то, что отношение webkit-min-device-pixel составляет 1,5, но на самом деле это 1,0

Update2

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

Позвольте мне снова заявить о своей конкретной проблеме. У меня есть кросс-платформенное веб-приложение, которое должно работать на рабочем столе, мобильных телефонах и планшетах. Из-за разной плотности пикселей каждый элемент приложения выглядит примерно на 50% больше на экране ноутбука 96 точек на дюйм, чем на мобильном устройстве (144 dpi). Одна вещь, которая меня действительно интересует, - это то, почему даже window.devicePixelRatio = 1.5 для этого устройства, браузер рассматривает ее так, как будто она была 1.0 (иначе она будет выглядеть так же, как на рабочем столе).

Я использую один дизайн для рабочего стола и планшета, разрешение не имеет значения. Мое веб-приложение является автономным, поэтому пользователь настольного компьютера может установить ширину окна как 800px. Но все будет слишком большим на рабочем столе по сравнению с планшетом. Мне придется устанавливать разные размеры на элементы на планшете и на рабочем столе. Одна вещь, которая приходит мне на ум - использовать медиа-запрос, (min-device-pixel-ratio: 1.5) установит стиль для мобильных устройств.

Итак, у меня есть возможное обходное решение, но я хотел бы узнать больше о несоответствиях пикселов CSS. Это дело только для мобильных или настольных компьютеров или есть еще проблемы? Мне кажется, что это более или менее одинаково на мобильных устройствах, но я не могу его проверить. Мне хотелось бы обсудить эту тему, другие возможные обходные пути, передовые методы, некоторые ресурсы. Я искал, и я не мог найти что-либо в Интернете. Все просто говорят: "CSS-пиксель - это наш независимый от плотности пиксель", но вот правда:

Ответ 1

Разница в размерах по дизайну. Мобильные устройства, как правило, смотрятся ближе к глазу, и из-за меньшего размера экрана больше нужно забивать в меньшем пространстве.

Проблема в том, что компьютер может даже не знать размер экрана, или же изображение может быть зеркально отражено на двух разных экранах - например, на вашем мониторе ноутбука и в проекторе, - где размер явно отличается. Кроме того, большинство компьютеров и некоторых мобильных телефонов позволяют масштабировать экранные элементы, что также влияет на размер элементов на вашем веб-сайте. Кроме того, вы бы не захотели, чтобы значок на 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 element font-sizes соответственно, эти единицы могут использоваться для других правил, таких как width и padding, чтобы сделать их масштабированными относительно шрифта- размер, установленный поставщиком. Это работает, потому что у разных устройств будет другой размер шрифта по умолчанию для корневого элемента (обычно более крупный шрифт для большей плотности пикселей, чтобы обеспечить примерно согласованный размер шрифта). Таким образом, использование em и rem будет масштабироваться соответствующим образом - если вы не перепишете его в своем CSS с абсолютным значением, конечно. Хотя rem (root font size) более удобен в некоторых сценариях, обратите внимание, что vw, vh, vmin и vmax могут оказать большую помощь при создании масштабируемого контента, Однако это не поможет вам создать контент.

В заключение, если бы я был вами, я бы не был так обеспокоен попыткой сделать элементы одинакового размера на всех мониторах; это поиски напрасно. Мало того, что вам не удастся, но даже если вы это сделаете, будет удобнее использовать ваш сайт.

Ответ 2

Я бы не стал слишком зацикливаться на соотношении пикселей, это действительно актуально только для расстояния от сенсорных событий. Благодаря гибким макетам, единицы px лучше всего подходят для растровых изображений и псевдоэлементов, которые нуждаются в позиционировании смещения. Гораздо лучше использовать масштабируемые устройства, такие как %, em, vh, vw и т.д. Для макетов с учетом устройства.

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

document.body.style.fontSize = (document.body.offsetWidth * .282) + '%';

.282 нормализует значение до приемлемого количества, fontSize будет относиться к ширине устройства и будет влиять на все элементы, которые используют элемент em для определения размера.