LINUX.ORG.RU

Низкого разрешения иконки/смайлики на дисплеях высокого разрешения.

 ,


1

1

Такая задача, всё чаще вызывающая натыкание. Есть сайт, адаптированный под обычные гуанодисплеи низкого разрешения. 96dpi en masse. Смайлики 16x16 px и т.п.

Но нужно показывать на мобильных девайсах. Где размеры среднелопатные несколько дюймов, зато 300..400+ dpi. Показывать нужно так, чтобы одна и та же страница без перевёрстывания показывалась нормально и на большом экране низкого разрешения и на мелком высокого.

Что касается вёрстки/дизайна вопросов нет. Всё решается легко.

Что касается шрифтовых иконок — тут тоже всё более-менее. Можно привязаться к размеру шрифта, иконки там примитивные, в низком разрешении показываются хорошо.

С иконками/смайликами/превьюшками же начинается засада. Скажем, SVG для смайликов. Можно, например, в миллиметрах размер указать. Но SVG паршиво аккуратно рендерится в мелкие картинки под 16x16px. Ещё хуже с растровой графикой.

Тут появляется интересная возможность масштабирования картинок в CSS3. Пишешь для hi-res дисплея что-то типа

-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);

И готово. Для обычного разрешения, где эта фигня не используется, показывается растр натурального размера, для высокого разрешения — размер удваивается. В 90% случаев этого достаточно для приличного отображения. Для совсем высокого разрешения можно и добавить scale.

Но тут вылезает другая засада. Масштабирование осуществляется в рамках заложенного с html плейсхолдера o_O То есть пишем width=«16» height=«16» — опаньки, размер в пикселах останется тем же, тупо картинка вылезает за пределы положенной вёрстки.

Вижу навскидку два решения, но оба некрасивые. Во-первых, можно через JS в таком случае менять атрибуты тега img после загрузки. Это ужасно. Второй вариант чуть лучше, не писать вообще width/height, а использовать типовые картинки, с размерами, заложенными в CSS. Это в целом нормально, но проблемы будут с картинками произвольных размеров. Хотя и тут есть дополнительные обходные пути, типа новых возможностей обрезки через CSS в рамки типовых плейсхолдеров (или даже чисто серверная подготовка).

В общем, задача пока не решена и я эту мысль думаю. Может, кто-то что-то подскажет?

★★★★★

если через background вставляешь картинки — то делай:

background-size: 50%

всё остальное — как обычно. всякие transform: scale(2); — не нужны

если НЕ через background вставляешь картинки — то указывай в CSS например height: 16px (в случае когда высота файла 32 пикселя в GIMP).

короче всё уменьшай в два раза :-) в CSS , чем настоящий размер картинки в GIMP

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 11)
Ответ на: комментарий от user_id_68054

если через background вставляешь картинки

Увы, интересует прямая вставка. Тем более, что бэкграунд не решает вопрос размера картинки. Кроме как в последнем моём варианте с фиксацией через CSS-класс.

указывай в CSS например height: 16px

Будет же фиксированный не масштабирующийся вариант.

короче всё уменьшай в два раза :-) в CSS , чем настоящий размер картинки в GIMP

У меня стоит обратная задача — увеличить картинку на хайрезе. Она итак хорошо смотрится на низком разрешении. Соответственно, при увеличении на хайрезе до равного физического размера. Скажем, смайл в 16x16px — это 4.2x4.2 мм на классических 96 dpi. На 430 dpi он будет всего 0.9мм, так что надо увеличить его до тех же 4мм — выглядеть будет при апскейле нормально. Не хуже, чем на обычном дисплее.

KRoN73 ★★★★★ ()

вообще не понятно зачем ты пытаешься в CSS *увеличивать* картинки...

тебе их нужно наоборот (в CSS) уменьшать :-) , а не увеличивать..

и про <meta name="viewport" content="width=device-width" /> — не забудь

user_id_68054 ★★★★★ ()
Ответ на: комментарий от KRoN73

У меня стоит обратная задача — увеличить картинку на хайрезе.

нет. ты не угадал. :-)

«высокое разрешение» это не синоним «всё мелко».

на «высоком разрешении» — маштаб УЖЕ точно такой же как и на «маленьком разрешении».. но при этом на высоком разрешении более высокая чёткость чем на низком разрешении.

если последний абзац — не является истиной (в твоём практическом случае) — то нужно первым делом выяснить почему так происходит. где именно прокралась ошибка (что именно глючит? Firefox глючит? или операционная система? или ещё что-то?)..

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 1)
Ответ на: комментарий от user_id_68054

вообще не понятно зачем ты пытаешься в CSS *увеличивать* картинки...

В предыдущем сообщении написал, почему: Низкого разрешения иконки/смайлики на дисплеях высокого разрешения. (комментарий)

тебе их нужно наоборот (в CSS) уменьшать :-) , а не увеличивать

Уф. Ещё раз. Если я возьму картинку 32x32px и уменьшу для обычного дисплея вдвое до 16x16, то в львиной доле случаев получу отстойное качество. Слишком грубое зерно на 96dpi. Особенно на ЖК. Да ещё и не каждый браузер хорошо масштабирует. Поэтому опорный размер должен быть именно мелкий.

А вот если я 16x16 на дисплее высокого разрешения увеличу до 32x32 (точнее, реально даже до 64x64 если у нас 430dpi вместо 96dpi), то качество от этого не пострадает. Да, картинка будет смотреться чуть хуже, чем изначально высокого разрешения, но всё равно не хуже, чем на стандартном экране низкого разрешения. И в любом случае это вариант вторичный чисто по числу пользователей. Сейчас-то они смотрят вообще 16x16px миллиметрового размера :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от user_id_68054

нужно первым делом выяснить почему так происходит. где именно прокралась ошибка

Нет никакой ошибки. Картинка 16x16px на 430 dpi покажется размером 0.9мм. Это чистая математика. Вот картинка размером 5мм так и покажется в 5мм, если всё настроено верно. Проблема в том, что основные дисплеи мониторов и ноутбуков слишком грубы, чтобы пересчитывать пикселы картинки в миллиметры экрана с масштабированием.

Поэтому постулат — делаем так, чтобы на дисплеях низкого разрешения картинка показывалась 1:1 без всяких масштабирований. А все игры с ним — на высоком разрешении.

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

Да ещё и не каждый браузер хорошо масштабирует. Поэтому опорный размер должен быть именно мелкий.

если ты не хочешь уменьшать картинку (32 GIMP-пикселя превражать в 16px CSS-овских-пикселей) — так как считаешь что уменьшеие в два раза делается не совсем красиво.

...то вот тебе второй вариант:

просто ни чего не делай. то есть использай 16px CSS для 16-пиксельных-GIMP-картинок.

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

user_id_68054 ★★★★★ ()
Ответ на: комментарий от KRoN73

Картинка 16x16px на 430 dpi покажется размером 0.9мм. Это чистая математика.

нет математика тут не причём :-) .. у браузерах виртуальные пиксели.

то есть 16px прописанные CSS — будут на HiRes-экранах рисоваться физическими 32-пикселями (или даже больше, 48-пикселями)

а на обычных экранах будут рисоваться всё как обычно 16-пикселями.

(именно поэтому, чтобы не путаться я писал слово GIMP (указывая на редактор GIMP), чтобы мы понимали бы о каких пикселях идёт речь)

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 1)

вот тебе ещё один пример.

если я на мобильном телефоне открываю http://internet.yandex.ru/

то мне пишут что у меня разрешение экрана 360x640 .

а на самом деле физическое разрешение экрана у меня там в телефоне: 720x1280 ...

однако 360x640 — это как раз и есть эти «виртуальные» пиксели, которые в CSS оперируют :-)

user_id_68054 ★★★★★ ()
Ответ на: комментарий от user_id_68054

нет математика тут не причём :-) .. у браузерах виртуальные пиксели

Картинка 1000x1000px на дисплее 1920x1080px просто обязана показываться почти во весь экран. А не в четверо больше экрана :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

Картинка 1000x1000px на дисплее 1920x1080px просто обязана показываться почти во весь экран. А не в четверо больше экрана :)

заранее невозможно сказать как именно покажется эта картинка на экране

так как «width:1000px; height:1000px» — это очевидно ты говоришь про виртуальные пиксели, а вот экран «1920x1080» это очевидно ты говоришь про физические пиксели.

отношение виртуальных пикселей к физическим пикселям — это тоже важный аргумент в этом вопросе

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 1)
Ответ на: комментарий от user_id_68054

то мне пишут что у меня разрешение экрана 360x640

Там фигня какая-то не адаптированная под мобильный экран. С масштабированием. Мне такой режим, как раз, нафиг не сдался. Показывать надо в натуральную величину без масштабирования.

Чтобы далеко не убегать в сторону, вот заготовка того, как должно быть:
http://www.wrk.ru/tech/forum/2010/09/t88800,2--stuxnet-i-drugie-promyshlennye...

Открой на десктопе, открой на мобильном устройстве, сравни. Т.е. речь о том, чтобы ничего не масштабировать, не скроллить по горизонтали и т.п. Работать ещё много, сабжевые картинки, меню и т.п., но общая логика — такая. Открываешь и читаешь. Вариант с виртуальным разрешением не катит, так как требует увеличения страницы перед каждым чтением.

KRoN73 ★★★★★ ()
Ответ на: комментарий от user_id_68054

так как «width:1000px; height:1000px» — это очевидно ты говоришь про виртуальные пиксели, а вот экран «1920x1080» это очевидно ты говоришь про физические пиксели

Угу. Но при правильной конфигурации страницы они равны :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

Картинка 16x16px на 430 dpi покажется размером 0.9мм.
Это чистая математика

напиши формулу как ты это пощитал. (и не забудь в эту формулу подставить коэффициент отношения виртуального пикселя к физическому пикселю)

user_id_68054 ★★★★★ ()
Ответ на: комментарий от KRoN73

Угу. Но при правильной конфигурации страницы они равны :)

эй! :-) .. погоди, погоди! что за такая ещё «правильная» конфигурация страницы? :-)

user_id_68054 ★★★★★ ()
Ответ на: комментарий от KRoN73

Открываешь и читаешь. Вариант с виртуальным разрешением не катит, так как требует увеличения страницы перед каждым чтением.

что за такое увеличение страницы?

прости, не могу похвастаться красивым сайтом с картинками — но тут http://www.httpdistortion.org/ — просто открываешь текст и читаешь его (не приходится ни чего увеличивать)

тег <meta name=«viewport»....

<meta name="viewport" content="width=device-width" />

...как раз и нужен чтобы сообщить браузеру что не нужно делать всякие говянные оптимизации, и по сути он обознает что ты (web-дизайнер) знаешь что такое «виртуальный» пиксель

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 1)
Ответ на: комментарий от user_id_68054

погоди, погоди! что за такая ещё «правильная» конфигурация страницы? :-)

Вот я выше ссылочку как пример кинул. Там при открытии по дефолту физический пиксель равен экранному. Скажем, картинка шириной 640px у меня на экране шириной 1080px показывается примерно на 2/3 экрана по ширине. Надо бы CSS подправить, чтобы вообще 100% ширины была на мелких экранах.

Твой internet.yandex.ru — это пример не мобильного дизайна. Такой страницей на мобильном экране пользоваться неудобно. Мобильный дизайн — когда у тебя страница отображается сразу 1:1 без дополнительного масштабирования и горизонтального скроллинга. Ну пример от балды: http://getbootstrap.com/

Вот при таком раскладе физический пиксель экрана равен пикселю виртуальному. На пример с картинкой я выше ссылался.

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

ну значит тебе нужно указать:

<meta name="viewport" content="width=ЦИФОРКА_С_НУЖНЫМ_ТЕБЕ_ЧИСЛОМ" />

например так:

<meta name="viewport" content="width=1000" />

Твой internet.yandex.ru — это пример не мобильного дизайна

нет, так раз наоборот: в сайте «internet.yandex.ru» забыли сделать ориентировку на мобильники (забыли указать <meta name=«viewport»...)

user_id_68054 ★★★★★ ()
Ответ на: комментарий от user_id_68054

но тут http://www.httpdistortion.org/ — просто открываешь текст и читаешь его (не приходится ни чего увеличивать)

Хм. Интересно. У тебя там, действительно, картинки отображаются в виртуальном разрешении и масштабируются до физического. Внизу иконка на счётчик 31x31px на мобильном дисплее масштабирована до ~5мм = ~10% ширины экрана.

Видимо, надо поиграть с мета-тегами. На том же bootstrap хитрее. Картинка ~250px шириной занимает чуть меньше половины экрана. Т.е. виртуальное разрешение что-то под 600px в ширину. Буду копать...

KRoN73 ★★★★★ ()
Ответ на: комментарий от user_id_68054

ну значит тебе нужно указать

Пробовал несколько лет назад, ещё во времена перехода с WM6 на Android 2.3 :) Тогда не работало... И сейчас в адаптивном дизайне часто не практикуется и без него нормально работает. Вот и не стал рассматривать.

В общем, понятно, куда копать.

KRoN73 ★★★★★ ()

Зараза. С виртуальным разрешением работает как ожидается (хотя подгонять много ещё придётся), но тормозит даже на всё ещё не самом слабом LG G2, старшем брате Nexus 5. Не то, чтобы тормозит, конечно, но нет плавности при скроллинге и процессор греется аж корпус тёплый. Вырубаешь мета-тег — и всё ок, опять всё плавненько. Но картинки, естественно, снова мелкие, в настоящем разрешении.

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

нет плавности при скроллинге и процессор греется аж корпус тёплый.

эт на всех браузерах такое?

странное дело, конечно.. (там какая-то сложная вёрстка?)

user_id_68054 ★★★★★ ()
Ответ на: комментарий от user_id_68054

эт на всех браузерах такое?

Ну, я только в Хроме проверил. Но достаточно, чтобы только в нём тормозило, чтобы такое решение мне не подходило :) Так что в других не проверял.

там какая-то сложная вёрстка?

Да не особо. Видимо, сказывается, что картинок дофига (аватары, смайлики, тени в пикселах, опять же) — всё это масштабировать, видимо, ресурсы и тратятся. Хотя, можнт, и от bootstrap css как-то накладывается. В чистом-то виде он не тормозит, но х.з. как с точки зрения масштабирования сопрягается с моим legacy в плане нагрузки.

KRoN73 ★★★★★ ()
Ответ на: комментарий от user_id_68054

Понял, что конкретно вызывает ощущение тормозов. Если при отключении мета-тега скроллинг происходит мгновенно, страница сразу идёт за пальцем, то с включением — происходит короткая задержка, что-то тип 0.2 сек, т.е. даже не присмотревшись не поймёшь сразу, что не так. Но в результате двигаешь пальцем, а страница начинает двигаться не сразу и чуть отстаёт. Ощущается как лаг (собственно, и есть лаг).

Загрузил на пробу не в Хроме, а в штатном браузере. Офигел. Оказывается, там левое меню не уходит вниз. Т.е. css некорректно определяется исходя из физических размеров экрана. Я-то думал, что у Вебкита это всеобщая работающая штука. В результате масштабирование есть во всех режимах, хоть с мета-тегом, хоть без него. Метатег фактически задаёт только пропорции масштабирования.

При этом internet.yandex.ru показывает в родном браузере Андроида 1080x1920, и реально, по размеру картинки 640px, там где-то так и есть.

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

А, да. И при включении мета-тега встроенный браузер тоже подлагивает. С выключением — не лагает, всё плано. Хотя и масштаб другой.

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

Офигел. Оказывается, там левое меню не уходит вниз. Т.е. css
некорректно определяется исходя из физических размеров экрана.
Я-то думал, что у Вебкита это всеобщая работающая штука

а ведь Google обещал что он избавится от шаштного браузера? то есть как избавится: штатный браузер будет, но будет совсем другой, на движкее от Chromium якобы (то есть — получается что сейчас он ещё не такой)

этот момент на флагменных Андроидах уже наступил? или ещё только предстоит?

user_id_68054 ★★★★★ ()
Ответ на: комментарий от KRoN73

css некорректно определяется исходя из физических размеров экрана

я хоть и не очень понял о чём идёт речь.. но поясню чуть чуть :-) .. как я понимаю...

когда *нет* тега <meta name="viewport"...неважно..что..дальше.. , то мобильный браузер (каждый мобильный браузер причём по разному, как я смотрел, Firefox например ещё есть) начинает придумывать как бы оптимизировать страницу под мобилку.. и применяет эти всякие свои оптимизации, причём нужно быть очень рисковым парнем чтобы на эти оптимизации заранее полагаться:-)

это я не про лаги (отсутствие лагов) разумеется говорю, а про то как меняются размеры тех или иных элементов на странице

user_id_68054 ★★★★★ ()
Последнее исправление: user_id_68054 (всего исправлений: 5)
Ответ на: комментарий от user_id_68054

этот момент на флагменных Андроидах уже наступил?

Ну, LG G2 — это флагман прошлого года. И прошивку я не обновлял, не нравится мне 4.4, так что сижу на 4.2.2. Так что у меня есть браузер под оригинальным названием «Интернет», который прикидывается Mobile Safari.

KRoN73 ★★★★★ ()
Ответ на: комментарий от user_id_68054

а про то как меняются размеры тех или иных элементов на странице

Не, с этим вопросов нет :) Тут, как раз, всё понятно.

я хоть и не очень понял о чём идёт речь..

Фишка в чём. У меня стоит блок @media only screen and (max-device-width: 10cm) { ... }, в котором левое меню перестаёт позиционироваться слева, а уходит после всего текста. Т.е. на широких экранах имеем двухколоночную вёрстку — слева узкое меню, справа — контент. На узких — одна колонка контента, в конце страницы — блок меню. Размер фигурирует физический, виртуальная ширина на него не влияет (по крайней мере в сегодняшних экспериментах в Хроме).

На десктопе работает всюду, где проверял. На мобильных гаджетах проверял в Хроме, Опере, IE под WP8 — всё работает. А вот в родном «Интернете» проверить не додумался, полагая, что он на WebKit. Оказывается, судя по всему, рендерер браузера считает, что у него экран шире 10см :)

KRoN73 ★★★★★ ()
Ответ на: комментарий от KRoN73

А вот в родном «Интернете» проверить не додумался, полагая, что он на WebKit.

А он и правда был на webkit, только достаточно старом и кривом. В 4.4 воткнули новый, соответствующий хрому.

risenshnobel ★★★ ()

Блин, жопа... Решил, что мелкие тормоза, на которые жаловался выше, роли особой не сыграют и включил viewport.

— Сразу посыпались жалобы от юзеров iOS. Полная хрень с относительными размерами картинок. Игнорируют CSS-параметры, типа clear, max-width и т.п.

— На планшетах, ширина которых больше заданной во viewport всё стало кривым и огромным. В т.е. у меня под Android 5.

— Наконец, народ (видимо на более старых девайсах) под Android стал жаловаться на жуткие тормоза при скроллинге.

...

Походу, виртуальные пиксели пока ещё не созрели для сложной вёрстки. И надо ломать голову над исходной задачей...

KRoN73 ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.