Чем отличаются пиксели на компьютерном мониторе от пискелей на экране смартфона?
Всем привет, объясните пожалуйста - есть монитор с диагональю 21 дюйм и разрешением 1920 на 1080 пикселей и есть телефон с диагональю 5 дюймов и таким же разрешением. Я сверстал простенькую страницу, на которой медиазапросы изменяют страницу при уменьшении размера области отображения до 600 пикселей. На компьютере все работает, как и ожидалось, а вот на телефоне элементы слишком прижаты друг к другу. Короче, на 600 "мониторных" пикселях все прекрасно, но при этом этот же медиазапрос работает и на телефоне с разрешением экрана как бы 1920 на 1080. Почему так просходит? Разрешение на смартфоне не настоящее? Или я что-то упускаю?
Нижепредложенные слайды и видео пятилетней давности смотреть не вижу смысла
Можете спокойно смотреть.
Практически ничего не изменилось, кроме конкретных значений размеров экранов и вьюпортов. А размеры актуальных устройств смотрятся в справочниках.
Для верстки сайтов актуальны не физические пиксели, а размер viewport. 1080 в браузере превратятся 300-320-340 точек в зависимости от устройства.
Вам нужно узнать размер и фактическое разрешение вьюпорта (количество css-пикселей, а не физических пикселей) вашего моб.устройства, это значение устанавливает производитель. Распространенные варианты можно посмотреть на: mydevice.io/devices/ или viewportsizes.com. И уже под размер вьюпорта делать медиа-запросы.
смарты работают в hidpi-режиме: на 1 логический пиксель приходится 4 физических.
1920х1080 в смарте соответствует 960х540 на десктопе (если конечно десктоп тоже не в hidpi).
Спасибо, может какая годная статья под рукой есть, которую можно на эту тему прочитать? Нижепредложенные слайды и видео пятилетней давности смотреть не вижу смысла.
Простой
Простой
