Опубликовано пользователем в категории По-русски.

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

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

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

Использование медиа-запросов в картографических веб-приложениях на ArcGIS API for JavaScript (перевод статьи Applying media queries to your ArcGIS API for JavaScript applications)

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

Медиа-запросы CSS3 дают разработчикам возможность использовать различный дизайн интерфейса приложений, в зависимости от характеристик браузера (размера экрана в пикселах, плотности их размещения, ориентации устройства), в котором происходит отображение страницы. Например, разный дизайн страницы может быть использован для экранов смартфонов и для бОльших экранов планшетов и настольных ПК.

В данной статье рассмотрено использование адаптивного дизайна в картографическом веб-приложении на ArcGIS API for JavaScript с поддержкой различного дизайна для планшетов (768 x 1024px) и смартфонов (320 x 480px) на примере тестового приложения для виджета Легенда (Legend Widget). Во время прочтения этой статьи вы можете использовать приложение, созданное в качестве иллюстрации для данной статьи.

Примеры разрешений экранов различных устройств
©Esri

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

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

@media screen and (min-device-width:768px) and (max-device-width:1024px);

Запрос, показанный выше, позволяет указать настройки для устройств с шириной экрана 768px. и высотой 1024px. Существует запрос который помогает определить ориентацию устройства. Ориентацию устройства можно определить с помощью параметра orientation. Например, для настройки страницы при альбомной ориентации можно использовать следующий запрос:

@media (orientation: landscape) {
/* здесь должны быть стили для альбомной ориентации*/
}

Дизайн интерфейса также может быть изменен в соответствии с разрешением экрана устройства. Для экранов с высокой плотностью расположения пикселов, например экранов Retina на устройствах фирмы Apple может быть использован метод webkit-device-pixel-ratio:

@media (-webkit-min-device-pixel-ratio: 2) {
/* здесь должны быть стили для устройств с высокой плотностью размещения пикселов*/
}

Стоит обратить внимание на то, что префикс вендора является обязательным. В коде выше использован префикс webkit. Если необходимо учесть разрешение экрана, например, смартфона Motorolla Droid, плотность пикселов которого равняется 1,5, следует написать:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min–moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* здесь должны быть стили для данного типа устройств*/
}

Область просмотра (viewport) в мобильных устройствах управляет масштабом просмотра веб-страниц. Изменим пример кода, чтобы включить атрибут ширины:

Вместо добавления в код значения атрибута width для каждого разрешения, например 320px, следует использовать параметр device-width, который позволит убедиться в том, что существует точное соответствие между размером экрана и конкретным устройством. Атрибут width и медиа-запросы позволяют изменять расположение элементов пользовательского интерфейса при повороте устройства. Например, когда устройство находится в портретной ориентации, легенда не будет показана. Однако при повороте устройства в альбомную ориентацию панель инструментов будет скрыта, а панель легенды будет показана.

Изменение ориентации экрана (iPhone)
©Esri

Для бОльших устройств, например, iPad, Apple в руководстве по проектированию пользовательских интерфейсов рекомендует использовать компонент Split View Controller. В портретном режиме, как указано в рекомендациях, будет доступна панель инструментов для отображения левой панели в качестве всплывающего окна. В альбомной ориентации будет доступна небольшая панель в левой части компонента SplitView, в которой будет расположена легенда, и бОльшая панель в правой части компонента для отображения карты.

Изменение ориентации экрана (iPad)
©Esri

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

Рабочая группа CSS3 предложила расширить поддержку медиа-запросов в CSS3. Разработчики приложений на JavaScript могут выполнять такие запросы при запуске приложения и отслеживать изменения отдельных значений атрибутов. Например, метод matchMedia может быть использован для проверки соотношения размеров пикселов или ширины области просмотра страницы.

mediaQueryList = window.matchMedia(“(min-width:800px) and (min-device-aspect-ratio: 1/1)”);

Возвращаемый объект содержит два свойства: булево значение, указывающее на соответствие текущего состояния выражению запроса и медиа — сериализованную форму представления связанного медиа-запроса. Если область просмотра в браузере будет шире или равна 800px, этот код добавит элемент управления слайдер. Если это условие не выполнено — слайдер будет удален.

function toggleSlider() {
isDesktop = mediaQueryList.matches;
if (isDesktop) {
map.showZoomSlider(); // добавляем слайдер
} else {
map.hideZoomSlider(); // скрываем слайдер
}
}

Вызов метода matchMedia также выполняет проверку соотношения размеров пикселов — min-device-aspect-ratio: 1/1, чтобы определить, выполняется просмотр страницы в настольном браузере или на планшете. Так как разрешение в 1024px встречается и на планшетах и на настольных компьютерах, отказ от учета соотношения размеров пикселов приведет к тому что стиль для настольных браузеров будет применен при просмотре страницы в мобильном браузере в альбомной ориентации.

Скачать код примера.

Дополнительные полезные ресурсы по разработке для мобильных устройств:
Разработка веб-приложений для платформы Android
Тест правильности обработки медиа-запросов на странице
Проверка отображения пикселов в браузере
Список экранов устройств с различной плотностью пикселов
Инструмент для оценки производительности страниц в мобильных браузерах

Теги:


Комментирование завершено.