Как разработчики графического интерфейса имеют дело с переменной плотностью пикселей?
Сегодняшние дисплеи имеют довольно большой диапазон размеров и разрешения. Например, мой дисплей 34,5 см × 19,5 см (в результате диагональ которого составляет 39,6 см или 15,6 дюйма) имеет разрешение 1366 × 768 пикселей, в то время как MacBook Pro (3-го поколения) с диагональю 15 дюймов имеет 2880×1800 пикселей.
Многие люди жаловались на то, что с такими экранами высокого разрешения все слишком мало (см. Пример). Это легко объяснить, когда разработчики используют пиксели для определения своего GUI. Для "традиционных дисплеев" это не является большой проблемой, поскольку пиксели могут иметь примерно одинаковый размер на большинстве мониторов. Но на новых мониторах с гораздо более высокой плотностью пикселей пиксели просто меньше.
Итак, как могут / должны разработчики пользовательского интерфейса справиться с этой проблемой? Можно ли получить физический размер экрана? Можно ли установить физические размеры вместо пиксельных? Это все еще проблема (прошло много времени с тех пор, как я в последний раз читал об этом) или это было исправлено между тем?
(Хотя CSS, кажется, поддерживает cm, когда я пытаюсь здесь это, это не установленный размер).
3 ответа
как могут / должны разработчики пользовательского интерфейса справиться с этой проблемой?
Используйте инструментарий или структуру, которые поддерживают независимость разрешения. WPF создан с нуля, чтобы быть независимым от разрешения, но даже старые фреймворки, такие как Windows Forms, могут учиться новым трюкам. OSX / iOS и Windows (или браузер, если мы говорим о сети) сами могут попытаться решить проблему с помощью автоматического масштабирования, но если задействовано растровое изображение, разработчикам может потребоваться предоставить различные растровые изображения, такие как в Android (которые сталкиваются с самыми разными разрешение и плотность по сравнению с другими ОС)
Можно ли получить физический размер экрана?
Нет, и разработчики не должны заботиться об этом. Разработчики должны заботиться только о классе устройства (скажем, о различном пользовательском интерфейсе для планшета и смартфона) и, возможно, о DPI, чтобы решить, какой растровый ресурс использовать. Векторный ресурс и шрифт должны масштабироваться каркасом.
Это все еще проблема (прошло много времени с тех пор, как я в последний раз читал об этом) или это было исправлено между тем?
Зависит от того, когда вы в последний раз читаете об этом. Поддержка Windows по-прежнему неэффективна, даже для самих внутренних приложений, и, хотя всем, кто занимается разработкой в WPF или UWP, это легко, не ждите, что к ним скоро присоединятся крупные сторонние приложения. Масштабирование экрана OSX, кажется, работает немного лучше, в то время как современные мобильные ОС либо работают в ограниченном диапазоне разрешений (iOS и Windows Phone), либо справляются с любым разрешением, которое только можно себе представить ( Android)
Дизайн графического интерфейса в эпоху разнообразия дисплеев - это настоящий вызов. Я бы предложил несколько советов, в основном о дизайне приложений с графическим интерфейсом:
Никогда не устанавливайте и не ожидайте постоянный размер текста в пикселях - пользователь может изменить его из системных настроек ОС. Используйте некоторые реальные меры для текста и проверьте его размер в пикселях при рисовании. Предоставьте какой-нибудь способ поместить текст произвольного размера в границы окна.
Никогда не устанавливайте и не ожидайте постоянный размер пикселя графических элементов интерфейса. Попытайтесь расположить их на окне некоторым адаптивным способом - в соответствии с размером окна. Большинство инструментов GUI виджетов сегодня имеют такие инструменты.
Никогда не устанавливайте и не ожидайте диалоговых окон с постоянным размером пикселя. Позвольте ОС выбрать размер для вас, а затем используйте то, что вы получите (X). Или, если вам нужно установить какой-то размер и положение (Windows), определите его в процентах от размера экрана.
Если возможно, используйте масштабируемые форматы изображений для иконок. SVG отлично подходит для иконок на самом деле. Использование наборов растровых значков с разными размерами допустимо, но крайне неоптимально, так как использование памяти и в большинстве случаев не обеспечивает идеального масштабирования.
Есть несколько способов работать с экранами разных размеров, например, когда я делаю мобильные приложения в java, я либо использую DIP(независимые от плотности пикселей; они остаются с фиксированным размером), либо заставляет объекты занимать процент экрана с простой математикой., Что касается веб-разработки, вы можете использовать VW и VH (Viewport Width и Viewport Height), добавляя их в конец значения вместо px, объекты занимают процент от области просмотра. Например, 100vh занимает 100% высоты области просмотра. Тогда, как мне кажется, лучший способ сделать это, но отнимающий много времени, - это использовать библиотеку типа Bootstrap, которая автоматически изменяет размеры элементов, даже когда размер окна изменяется. В W3Schools есть хорошее руководство по начальной загрузке, а более подробные объяснения по любому из этих вариантов можно найти с помощью простого поиска в Google.