Макет

Размер экрана, плотность пикселей и масштабирование

Не знаю о вас, но я, когда впервые узнал, что зона прикрепленного просмотра всегда имеет 320 пикселей в ширину - реальных пикселей, а не некое значение, выраженное в процентном выражении от ширины экрана - это меня озадачило. Не даст ли это совершенно разные впечатления от программы на разных дисплеях? Ответ на этот вопрос отрицательный. 320 пикселей - это около 25% от базового размера монитора 1366х768, что означает, что оставшиеся 75% - это вполне знакомые нам 1024х768. На 10-дюймовом дисплее это примерно 2.5 дюйма физического пространства дисплея. Пока всё понятно.

На более крупных мониторах, с другой стороны, таких, как 2560x1440, эти 320 пикселей займут лишь 12,5% ширины, таким образом, макет полного экрана выглядит совершенно иначе. Однако, учитывая то, что подобные мониторы имеют 24-дюймовую диагональ, эти 320 пикселей снова занимают примерно 2.5 дюйма физического пространства экрана, что означает, что зона прикрепленного просмотра выглядит так же, как и ранее. Она лишь имеет больше вертикального пространства и оставляет после себя больше свободного места на экране.

Это приводит нас к вопросу о плотности пикселей (pixel density). Что произойдёт, если ваше приложение окажется на по-настоящему маленьком дисплее, имеющем высокое разрешение? Очевидно, что на подобном дисплее зона в 320 пикселей будет немногим более дюйма. Есть у кого-нибудь увеличительное стекло?

К счастью, это не тот вопрос, о котором беспокоятся приложения для Магазина Windows… Почти. Основное преимущество, которое получает пользователь от подобного дисплея - это более высокая чёткость изображения, но не большая плотность информации. Сенсорные цели должны быть одинаковых размеров на мониторах любых размеров, не важно, сколько пикселей они занимают. Ведь человеческие пальцы не меняются с развитием технологий! Для того, чтобы это учитывать, Windows автоматически уменьшает масштаб эффективного разрешения, которое сообщается приложению, что означает, что любые координаты, которые вы используете внутри приложения (в HTML, CSS и JavaScript) автоматически масштабируются к разрешению того устройства, на котором осуществляется вывод пользовательского интерфейса приложения. Это производится на низком уровне подсистем рендеринга HTML/CSS в хост-процессе приложения, всё выводится в соответствии с особенностями пикселей конкретного устройства для максимальной чёткости изображения.

Что касается "почти", сказанного выше, единственное место, где вам нужно заботиться о плотности пикселей, касается растровой графики для экрана-заставки и плиток приложения, как мы уже говорили в "Анатомия приложения и навигация по страницам" . Скоро мы к этому вернемся, в разделе "Графические элементы, которые хорошо масштабируются" ниже.

Разные размеры экрана, разная плотность пикселей может быть протестирована с помощью имитатора в Visual Studio, или на закладке Устройства (Device) в Blend. Последний вариант показан на Рис. 6.5. Здесь отображены применимый DPI и фактор масштабирования. 100% масштаб означает, что приложению напрямую сообщают о разрешении устройства. 140% и 180%, с другой стороны, что означает, что имеет место масштабирование. При размерах экрана 10.6 дюйма, разрешении 2560х1440 и масштабировании в 180%, например, приложение увидит данный экран как экран с размерами 1422х800 (2560/1.8 на 1440/1.8), что очень близко к стандартному дисплею 1366х768. Похожим образом, при размерах экрана 10.6 дюйма и разрешении 1920х1080 масштабирование в 140% покажет приложению экран размером 1371х771 (1920/1.4 на 1080/1.4). И в том и в другом случаях макет, разработанный в расчёте на экран 1366х768 полностью подходит, хотя вы, конечно, можете настроить его так точно, как захотите.

Рис. 6.5. Параметры для задания размеров дисплея и плотностей пикселей на закладке Устройство (Device) в Blend

Как отмечено ранее, работая с состояниями просмотра, вы можете программным способом определять точный размер окна вашего приложения посредством свойств window.innderWidth и window.innerHeight, свойствами document.body.clientWidth и document.body.clientHeight, и свойствами clientWidth и clientHeight любого элемента, который занимает 100% тела страницы. Внутри window.onresize вы можете использовать их (или свойства args.view.outerWidth и args.view.outerHeight) для того, чтобы подстроить макет приложения под изменения, касающиеся общего режима отображения приложения. Конечно, если вы используете что-то наподобие CSS-сетки с дробными размерами строк и столбцов, большинство подобных настроек макета будет выполнено автоматически.

В любом случае, размер уже отражает автоматическое масштабирование с учетом плотности пикселей, таким образом, это - размеры, под которые вы адаптируете макет. Если вы хотите знать, каковы физические размеры дисплея, с другой стороны, вы можете воспользоваться свойствами window.screen.width и window.screen.height. Другие параметры дисплея можно обнаружить в объекте Windows.Graphics.Display.DisplayProperties (http://msdn.microsoft.com/library/windows/apps/br226143.aspx), в частности, такие, как logicalDPI и текущее значение resolutionScale. Последнее является значением перечисления Windows.Graphics.Display.ResolutionScale (http://msdn.microsoft.com/library/windows/apps/windows.graphics.display.resolutionscale.aspx), среди них - scale100Percent, scale140Percent, и scale180Percent. Возвращаемые значения этих идентификаторов - 100, 140 и 180, таким образом, вы можете использовать resolutionScale напрямую в вычислениях.

Врезка: Хорошая возможность для удалённой отладки

Работа с различными возможностями устройств предоставляет хорошую возможность поработать с удалённой отладкой, как описано в материале "Выполнение приложений для Магазина Windows на удаленном компьютере" (http://msdn.microsoft.com/library/windows/apps/hh441469.aspx). Такой подход позволит вам протестировать программу на различных дисплеях без необходимости устанавливать на каждом из устройств Visual Studio, и, кроме того, даст вам преимущества отладки с использованием нескольких мониторов. Вам лишь нужно установить и запустить средства удалённой отладки на целевом устройстве и убедиться, что оно подсоединено с помощью кабеля к той же сети, к которой подключен компьютер, на котором вы выполняете разработку. (Вам может понадобиться приобрести маленький USB-Ethernet-адаптер, если ваше устройство не имеет подходящего порта - удалённая отладка не работает через Интернет и при соединении устройств по беспроводной сети). Монитор удалённой отладки, выполняющийся на удалённой машине, сообщает о себе Visual Studio, исполняющемся на машине разработчика. Обратите внимание на то, что когда вы попытаетесь приступить к удалённой отладке в первый раз, вам предложат получить лицензию разработчика для целевого устройства, таким образом, это устройство должно быть подключено к Интернету в это время.

Графические элементы, которые хорошо масштабируются

Различные размеры экранов и плотности пикселей задают приложениям еще одну задачу, не связанную с макетом, касающуюся графических элементов, которые всегда должны выглядеть наилучшим образом. Конечно, вы можете рисовать графические элементы напрямую, используя элемен HTML5 canvas, на что мне хотелось бы обратить ваше внимание, так это на заранее сформированные графические ресурсы.

Масштабируемая векторная графика HTML5 (scalable vector graphics, SVG) в данном случае очень кстати. Вы включаете встроенный SVG-код в свой HTML (включая фрагменты страниц), или вы можете хранить их в отдельных файлах и ссылаться на них как на атрибуты img.src. Один из самых простых способов использовать SVG - разместить элемент img внутри пропорционально настраиваемой ячейки CSS-сетки и задать стили width и height этого элемента в 100%. SVG автоматически масштабируется для заполнения ячейки, и так как ячейка изменяет размер вместе с элементом, являющимся контейнером для SVG, всё обрабатывается автоматически.

У такого подхода есть одна проблема - SVG масштабируется с учетом соотношения сторон ячейки CSS-сетки, в которой находится, а оно не всегда может быть таким, как вам нужно. Для того, чтобы управлять этим поведением, убедитесь, что SVG имеет атрибуты viewBox и preserveAspectRatio, где cоотношение сторон, хранящееся в viewBox соответствует тому, которое задано свойствами SVG width и height:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"
width="300"
height="150" viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet">

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

Что касается ресурсов в пакете приложения, мы уже видели, как работать с различными плотностями пикселей в "Анатомия приложения и навигация по страницам" , посредством суффиксов к именам файлов .scale-100, .scale-140, и .scale-180. Этот подход работает для любых изображений в вашем приложении, используемых во всех случаях, будь это изображение для экрана-заставки, изображения плиток и другие графические ресурсы, на которые есть ссылки в манифесте. Таким образом, если у вас есть растровое изображение, имеющее имя banner.png, вы создатите три изображения в пакете приложения, которые будут называться banner.scale-100.png, banner.scale-140.png, и banner.scale-180.png. Затем вы можете просто ссылаться на базовое имя элемента в CSS или в конструкциях вида <img src= "images/banner.png"> и background-image: url('images/banner.png'), и загрузчик ресурсов Windows чудесным образом автоматически загрузит изображение, имеющее подходящий масштаб. (Если файлы с суффиксами .scale-* не найдены, загрузчик будет искать файл banner.png). Мы увидим даже больше подобных чудес в "Макет" курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", где мы так же добавим варианты для различных языков и контрастных цветовых схем, которые представляют дополнительные собственные суффиксы.

Если вам не по душе подобная схема именования файлов, знайте, что вместо этого вы можете использовать похожим образом именованные папки. Таким образом, для реализации этого подхода вам понадобятся папки с именами scale-100, scale-140, и scale-180, расположенные в папке изображений и содержащие файлы с неизмененными именами (наподобие banner.png).

В CSS вы так же можете использовать медиа-запросы с установками max-resolution и min-resolution для управления тем, какие изображения будут загружены. Помните, однако, что CSS опирается на логическое DPI, а не на физическое DPI, граница для каждого фактора масштабирования указана далее (значения DPI здесь слегка отличаются от тех, которые даны в документации, так как они получены из эмпирических тетстов; документация предлагает, соответственно, значения в 134, 135 и 174 dpi).

@media all and (max-resolution: 134dpi) {
/* масштаб 100% */
}
 
@media all and (min-resolution: 135dpi) {
/* масштаб 140% */
}

@media all and (min-resolution: 174dpi) {
/* масштаб 180% */
}

Как разъяснено в "Руководстве по масштабированию в зависимости от плотности пикселей" (http://msdn.microsoft.com/library/windows/apps/hh465362.aspx), подобные медиа-запросы особенно полезны для изображений, которые вы получаете из удалённого источника, где вам может понадобиться вносить поправки в URI или в строку запроса URI. Смотрите "Быстрый старт" курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", "Плитки, уведомления, экран блокировки и фоновые задачи", раздел "Использование локальных изображений и изображений, полученных из Web" для того, чтобы найти сведения о том, как при обновлении плиток данные механизмы используются для масштабирования, учёта контрастных схем и языковых особенностей.

Вы можете программным образом получить свойства logicalDpi и resolutionScale из объекта Windows.Graphics.Display.DisplayProperties. Событие logicaldpichanged (событие WinRT) может быть, так же, использовано для проверки изменений resolutionScale, так как эти два параметра всегда связаны. Использование данных API проиллюстрировано примером "Масштабирование в соответствии с DPI" (http://code.msdn.microsoft.com/windowsapps/Scaling-sample-cf072f4f).

Если ваше приложение поддерживает кэш графических ресурсов, кстати, особненно для тех, которые загружены из удалённого сервиса, организуйте их в соответствии с resolutionScale, для которого они были получены. Таким образом, вы можете получить наилучшие изображения если и когда нужно, или вы можете уменьшить масштаб изображений с более высоким разрешением, которые у вас уже есть. Следует так же учитывать, при использовании перемещаемых параметров приложения, что плотность пикселей и размеры дисплея могут варьироваться между различными устройствами пользователя.