Общие сведения

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

В режимах просмотра и редактирования проекта приложение автоматически распознает разрешение экрана и отображает слой с соответствующей настройкой отображения.

Диапазон разрешений экрана разделен в приложении на пять частей, с которыми условно соотнесены типы устройств:

  • смартфон – от 320 до 767 пк;
  • планшет – от 768 до 1365 пк;
  • ноутбук – от 1366 до 1919 пк;
  • монитор – от 1920 до 2559 пк;
  • большой монитор – от 2560 до 3840 пк.

Разрешение экрана распознается по ширине окна браузера. Использование в браузере масштабирования и боковых панелей влияет на автоматическое распознавание, уменьшая получаемое значение.

Отображение слоя при различных разрешениях

Отображение для разных типов устройств

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


Разрешение экрана попадает в часть диапазона «Ноутбук»


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


Отображение слоя для типа устройства «Планшет»

 

Отображение слоя для типа устройства «Смартфон»


Изменяя масштаб окна браузера или разрешение экрана устройства, вы можете видеть, как автоматически переключается тип устройства.

Отображение для различных разрешений экрана устройства

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


При меньшем разрешении экрана текст на виджете обрезается



При большем разрешении экрана текст на виджете читаем


Чтобы скрыть или отобразить ползунок, кликните кнопку выбранного типа устройства.

Чтобы увидеть, какое разрешение выбрано ползунком, зажмите его курсором.

При переключении между типами устройств, когда выбранный тип не соответствует распознанному разрешению экрана, ползунок отображается в середине диапазона.

Настройка слоя для различных разрешений

Настройка слоя для выбранного типа устройства автоматически сохраняется когда:

  • на слое изменяются размеры компонента проекта;
  • на слое изменяется расположение компонента проекта;

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

Для примера перейдем в режим редактирования, добавим на слой три компонента, сохраним проект, а затем посмотрим, как слой отображается для другого разрешения экрана.

Обратите внимание! Добавление и удаление компонента проекта применяется целиком к слою и не может быть применено для отдельного типа устройства.



Компоненты добавлены на слой



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


Чтобы улучшить читаемость текста на виджетах и таблице, перейдем в режим редактирования, выберем соответствующий тип устройства, и перекомпонуем слой. Обратите внимание, что после манипуляций с компонентами на слое, на пиктограмме типа устройства появилась галочка.


После манипуляций с компонентами на слое, на пиктограмме типа устройства появилась галочка


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

При последующих переходах в режим редактирования галочка отображается для типов устройств, слой для которых был перекомпонован.

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



  • Нет меток