Оптимизация мэшапа для мобильных устройств
Мобильное устройство имеет меньший экран, чем настольный монитор, и ваш мэшап может отображаться по-другому. Можно сконфигурировать настройки мобильного устройства, чтобы оптимизировать вид мэшапа на мобильных устройствах во время выполнения. При открытии мэшапа на мобильном устройстве браузер выполняет рендеринг страницы на основе размера по умолчанию, а затем размещает содержимое на основе этих размеров. Браузеры мобильных устройств визуализируют веб-страницы согласно предопределенному набору настроек viewport.
Порт просмотра - это размер окна браузера, которое можно использовать для отображения мэшапа. На мобильных устройствах размер порта просмотра может отличаться от дисплея другого устройства. Для рендеринга веб-страниц в браузере используется размер по умолчанию, который может быть больше размера дисплея устройства. Затем веб-страница масштабируется в соответствии с этими размерами. Загрузка содержимого в порт просмотра, размер которого больше дисплея устройства, может привести к неправильному переносу элементов. Можно задать мобильные настройки, чтобы переопределить для браузера настройки просмотра по умолчанию.
Чтобы оптимизировать мэшап для мобильных устройств, задайте тег метаданных порта просмотра, изменив настройки мэшапа для мобильных устройств. Эти настройки влияют только на мобильные устройства. Неправильное конфигурирование мэшапа может привести к неверному отображению на мобильном устройстве, что приведет к плохому взаимодействию с пользователем.
При разработке мэшапа для мобильных устройств необходимо принимать во внимание следующие рекомендации.
• Создавайте адаптивный мэшап с помощью адаптивных компоновок и виджетов.
• Не создавайте компоновку, в которой пользователи должны выполнять горизонтальную прокрутку для взаимодействия с мэшапом.
• При визуализации применяйте настройки мобильных устройств к мэшапу верхнего уровня.
• Задавайте ширину и высоту мэшапа относительно экрана устройства.
 |
Если в мэшапе есть мастер или вложенный мэшап, используются настройки мэшапа верхнего уровня.
|
Следующий мэшап содержит два виджета "Метка" в адаптивном контейнере. Для контейнера задано направление выравнивания по вертикали. В левом виде браузера настройки ширины и высоты мобильного устройства задаются как пользовательское значение, которое больше экрана устройства. При загрузке мэшапа выполняется рендеринг мэшапа в соответствии с заданными размерами. Текст отображается в меньшем размере относительно дисплея, что затрудняет просмотр мэшапа.
В виде справа показан тот же мэшап с настройками высоты и ширины, заданными для этого устройства. Адаптивные виджеты масштабируются, чтобы компенсировать меньший размер экрана, и виджеты легко читаются.
Можно задать мобильные настройки, чтобы управлять видом мэшапа на мобильных устройствах. Глобальные настройки применяются к мобильным устройствам всех типов. Настройки iOS применяются к устройствам Apple. Можно задать ширину, высоту и масштаб страницы, чтобы улучшить взаимодействие с пользователем и видимость на более мелких экранах. Можно также создавать мэшапы с аналогичным видом для собственных приложений на iOS и Android с помощью полноэкранного режима. Дополнительные сведения о доступных настройках мобильных устройств см. в разделе Конфигурирование настроек мобильных устройств.