Retina споры с дизайнером? «DPI влияет на размер текста»?

Question

[Tigronix]

Ребят привет, есть довольно интересный вопрос про ретину и DPI выражения. Ведь не важно, какой DPI у устройства это влияет только на растровые изображения?
Я скину вам часть переписки с работы, поскольоку дизайнер убеждает меня в обратном.

"Vitold Demishkevich
Привет
Слушай, мне не дает покоя один вопрос. Он касается этих DPI media выражений.

Зачем именно для ретина дисплеев менять font-size? По сути разное число DPI влияет лишь на то, как выглядит растровое изображение. (Если у нас 100px растровое изображение есть, то на ретине 2x будет растягиваться в два раза.)
Я имею ввиду, что на ретине размер шрифта никак не меняется. Он будет такой же и на обычном планшете.

Может я чего не знаю или не понимаю?

Дизайнер:
тут дело не только в ретине или нет и не в рстровых изображениях. А в том, что все верстается в относительных величинах (относительно базового размера шрифта). Мы не хотим менять каждую конкретную кнопку под четыре разрешения мобильных устройств. Поэтому мы увеличиваем все элементы пропорционально.

Допустим. Высота кнопки на разрешении 320 (1x, неретина) равна условно 5 rem (40 px). То на разрешении мобильного устройства, у которого dpi выше, эта кнопка будет очень маленькая. Именно поэтому на устройствах, где плотность пикселей выше (hdpi) мы меняем один размер базового шрифта, относительно которого заданы все размеры всех элементов. Чтобы на экранах все выглядело и читабельно и нормально.

Например у меня телефон с hdpi, и все мелко, тексты мельче, но на iphone 5s все ок сейчас.
т.е. на мой телефон все элементы должны быть в 2 раза крупнее. как и размеры шрифта, так и кнопки. Но мы делаем просто изменение базового шрифта, за которым подтянется все остальное"

Comments

[Антон Иванов]

Не хочу вас расстраивать. Вообще дизайнер прав.

[alexandzolotarev]

Антон: Аргументируйте

[Tigronix]

Антон: А пояснение?)

[Андрей Хохлов]

Правы вы, дизайнер не понимает о чем говорит.

https://github.com/andrey-hohlov/psd-templates-req...

В том числе про ретину, со ссылками.

[kulaeff]

Дизигнер не прав, px - это не физический пиксель. Это некоторая величина, имеющая зависимость от window.devicePixelRatio. Если утрировано, то 1px на FullHD будет примерно равен 2px на retine, а значит специально менять размер шрифта не нужно для ретины. Да, понятно, что кнопка, о которой говорил дизайнер будет на мобиле "на глаз" меньше, чем на fullhd, но на мобиле и экран меньше физически.

[vasIvas]

100px везде 100px. Разница лишь в размере самого пикселя. 100px на обычном дисплее будет выглядеть в два раза меньше на ratio 2. То же самое и с текстом. Если 16px на обычном дисплее будет читабельно, то на x2 нет, будет в два раза меньше. Другое дело есть атрибут viewport, вот он может половину проблем решить.

Answer 1

[GreatRash]

16px везде будут равны 16px.
Если дизайнер упоролся, то сделайте ему тестовую страницу и пусть отстанет от вас уже.

Comments

[BanterFace]

16px равны 16px, да, но их оптический размер уменьшится, т.к. сами пиксели будут меньше.

[Froggyweb]

Глеб Сердюков: старая детская загадка что тяжелее 100 кг ваты или 100 кг железа

[lukoie]

Глеб Сердюков: так это ж условные пиксели.
если Вы на мониторе выставите разрешение 800*600, или 1024*768, разве количество реальных пикселей "на стекле дисплея" поменяется? Зато 14й текст будет разного размера!
Пиксели не будут меньше, т.к. в файле информация записывается попиксельно(ессно с условностями, вроде разницы форматов, сжатие и т.п., но единица там, в файле - пиксель).

[Stalker_RED]

lukoie: Да, монитор с его физическими пикселями немного сбивает с толку. Вот если заменить его на проектор, векторный какой-нибудь, чтоб пиксели были виртуальными от слова совсем. Тогда будет гораздо проще прочитать в википедии что такое "пиксель" и смириться.

[GreatRash]

Глеб Сердюков:

16px равны 16px, да, но их оптический размер уменьшится, т.к. сами пиксели будут меньше.

Оптический-хренический... Разработчики мобильных (да и не только мобильных) ОС не дураки, поэтому они используют в качестве единиц измерения dp, что расшифровывается как device independent pixel.

Правило простое как валенок:
a) всё, размеры чего можно задать в CSS (html-элементы, текст, svg-элементы), автоматически конвертируется в dp
b) любой растр (canvas, png, jpg) нужно "готовить руками"

Answer 2

[alexandzolotarev]

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

Answer 3

[cssfish]

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

upd: короче смешалось в кучу все. вы про ретину, диз вам про масштабирование "от шрифта".
на "телефоне с hdpi" мельче, чем на iphone5, потому что на телефоне (напр nexus7) может быть 600px (логических) в ширину, а на айфоне этом их - 320. В 600 входит поболее чем в 320, а трамбуется все это дело в "лопаты" примерно равного размера (чтоб в ладонь влезло, условно).

в общем, не валите все в одну кучу.

Answer 4

[Froggyweb]

При этом .

(Если у нас 100px растровое изображение есть, то на ретине 2x будет растягиваться в два раза.)

тоже не верно размер изображения тоже будет условно 100 px просто экран может передавать более детализованное изображение и начинает усреднять соседние пикселы из-за этого изображение будет мыльным

Answer 5

[zooks]

Почитайте про вьюпорт — вопросы отпадут.

Answer 6

[lukoie]

Ведь не важно, какой DPI у устройства это влияет только на растровые изображения?

Важно помнить что ДПИ есть не только у устройства, но и у файла, у ОС.
Потому, когда Вы выводите даже ВЕКТОР - оно ж должно как то его отобразить. "Пикселизирует" на лету и программа(да хоть Фотошоп), и ОС и железо, хотя у файла уже не будет там данных, записанных попиксельно.

Теперь попробуйте текст 14го кегля просмотреть на фуллэйчди, и смените разрешение монитора на 800*600. Изменится размер самого изображение на экране?