Помимо десктопной, вы можете создать отдельную планшетную и/или мобильную версию вашего проекта. Кликните по иконке ноутбука в нижнем левом углу окна редактора и активируйте Mobile для создания мобильной версии вашего проекта.
Обратите внимание: для мобильной версии проекта не доступна анимация On Hover («По наведению»).
Создание композиции
После активации переключателя мобильная версия создается автоматически (Mobile Auto-layout), при этом все виджеты в ней выстраиваются в единую колонку.
Нажмите на кнопку Create composition («Создать композицию») и вы увидите еще две опции, которые помогут вам легко создать мобильную версию проекта:
- Fit to mobile. Если вы активируете эту опцию, виджеты сохранят то же положение, что и в десктопной версии, но их размеры изменятся в соответствии с шириной мобильного вьюпорта.
- Desktop layout. Эта опция воссоздаст десктопную версию с исходными пропорциями. После этого вы сможете вручную передвигать виджеты и изменять их размер.
Все эти опции (включая Auto Layout) могут быть также активированы только для некоторых выбранных вами виджетов, а не всего лэйаута целиком.
Выберите не менее двух виджетов и нажмите на кнопку Auto Layout, Fit to mobile или Desktop layout. В результате изменятся положение и размер только этих виджетов.
Обратите внимание, что изменения касаются только размера и положения виджетов. Их атрибуты (цвет, размер шрифта и так далее) сохраняются при переключении между разными типами композиции в мобильной версии.
Планшетная версия
Дополнительно вы можете создать планшетную версию вашего проекта, которая также будет отображаться в мобильном вьюпорте при повороте телефона в горизонтальное положение. Кликните на иконку «плюс» рядом со значком мобильной версии и включите опцию Tablet and Landscape Mobile. Чтобы деактивировать планшетную версию, отключите эту опцию и нажмите на значок «минус».
Обратите внимание: Если у вас не активна планшетная версия, при повороте телефона в горизонтальное положение отобразится десктопная версия проекта. На планшетах в пейзажной ориентации всегда отображается десктопная версия проекта.
Шорткаты
Используйте клавиши на клавиатуре для переключения между десктопной (1), планшетной (2) и мобильной (3) версиями проекта. Эта функция доступна и в редакторе, и в режиме предпросмотра (Preview).
Высота страницы
Для того чтобы изменить высоту страницы, потяните за синий ромб в нижней части экрана или кликните по нему и введите точное значение для длины в пикселях.
Кастомная ширина
Чтобы изменить ширину мобильного вьюпорта, откройте настройки Grid & Guides и введите желаемое значение в верхнем правом углу.
При просмотре с реальных девайсов контент будет динамически масштабироваться в зависимости от ширины экрана.
Мобильная версия на разных устройствах
Чтобы проверить, как проект отображается на разных устройствах, откройте режим Превью и используйте переключатель в верхней части экрана. На данный момент доступны следующие устройства:
- iPhone SE (вертикальная и горизонтальнаяориентация)
- iPhone 11 Pro/X
- Google Pixel 2 XL
- Samsung Galaxy S20
Также на этом же экране вы можете проверить отображение проекта на планшетах (в том случае, если вы не активировали планшетную версию проекта дополнительно).
Обратите внимание: размеры макетов отображаемых версий проекта могут отличаться от размеровотображения на реальных девайсовах, но пропорции будут сохранены.
Версии проекта на разных экранах
Если у проекта есть десктопная, планшетная и мобильная версии, на устройстве отобразится та, размеры которой ближе всего к размерам его экрана. При повороте телефона в пейзажную ориентацию всегда отображается десктопная версия проекта. Если у проекта есть только десктопная версия, на любом устройстве будет отображаться именно она.