Нужно ли учитывать PPI смартфона при создании мобильной версии дизайна?
Недавно появился такой вопрос. Все время как веб-дизайнер рисовал две версии дизайна сайта - десктоп и мобильную (1920 и 360 или 320). Хочу дополнительно разрабатывать дизайн для мобильных приложений, но там нужно учитывать PPI. Например iPhone 8 имеет разрешение 375х667, но у него множитель х2 (в два раза больше пикселей на дюйм, чем у экранов без ретина), что говорит о том, что приложение нужно рисовать в разрешении 750х1334. Вопрос:
- Это работает и с сайтами? Если я нарисовал дизайн десктопной версии, то например мобильная версия/адаптив с основой на iPhone 8, также должна рисоваться в 750х1334? или все же 375х667?
Извините за много букав. Хотел максимально раскрыть вопрос :)
В медиазапросах все равно используют так называемые CSS-пиксели (виртуальные, иначе говоря), которые затем масштабируются в реальные пиксели. Но разрабатывать дизайн можно и в бОльшем разрешении, хоть это может и не иметь смысла.
Александр, спасибо, но как же картинки обычное PNG изображение не масштабируется же CSS стилями. Просто если сверстать мобильную версию и посмотреть через инструменты разработчика в браузере, как это будет выглядеть на мобильных экранах, то все здорово :)
Pyls, Для иконок верстальщики используют SVG (тот же Font Awesome), которое масштабируется как угодно. Конечно, если вам понадобилось использовать PNG-файл, то, чтобы при масштабировании он выглядел достойно, он должен быть высокого разрешения.
Александр, спасибо, но я запутался :) Как-то сверстал сайт, выстроил адаптивность. На всех разрешениях отображалось нормально, в том числе и на 320 / 360 / 480 при этом я тогда использовал PNG изображения. Соответственно, заказчик когда все было готово зашел со смартфона и все отображалось как надо. А ведь у него был Retina, по идеи, все картинки и иконки должны были быть в два раза меньше, но этого не произошло, а значит мобильный браузер как-то адаптирует. Или это работает реально только с приложениями на смартфоны
Pyls, картинки в два раза меньше реального разрешения, но они были растянуты. Посмотрите, что такое viewport. И его связь с реальным разрешением экрана и степенью масштаба. Это работает в любом браузере.
Ширина viewport iPhone 11 — 375px. Но неужели вы думаете, что это реальное разрешение экрана?
Рустам Байназаров, Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi).
Проще говоря, я нарисую дизайн сайта мобильной версии под 375px, а метатег viewport позаботится о корректном отображении сверстанного варианта на этом разрешении смартфона 375px, хотя реально у него 750px, верно? Извините, просто это уже к верстке относится, а я не очень в её тонкостях разбираюсь
Рустам Байназаров, Прочитал :) У человека, что-то с ноутбуком было и проблемы с макетом при верстке. Отлично, значит можно постепенно переходить на дизайны мобильных приложений, там правда нет такой классной штуки как viewport, придется рисовать дизайн для ретина и не ретина экранов смартфонов :) и учитывать кол-во пикселей на дюйм. А вот верстка это интересно, нужно доизучать, буду сначала верстальщиком, а потом и Front-End разработчиком на Vue.js или React.js.
Pyls, там тоже есть свой вариант viewport. Для retina и не retina отдельно ничего вам рисовать не нужно, кроме растровых материалов. Типичная единица DP в разработке под Android — это по сути тот же самое, что и PX в web.
Разница лишь в том, что в разработке приложений PX привязан к физическому PX, а в web PX — это некая виртуальная единица. Поэтому DP в приложениях Android примерно то же самое, что и PX в web — это относительные единицы.
Ну вот смотрите, ширина экрана у iPhone 6 и iPhone 11 — одинаковая в приложениях, они выглядят идентично по ширине, при этом между ними сильная разница в плане физического разрешения. Так что не надо никаких отдельных версий для retina, кроме растровых ресурсов.
Простой
Средний
