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

Для мобильной версии проекта не доступна анимация On Hover («По наведению»).

Порядок виджетов

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

Нажмите Arrange widgets и вы увидите еще две опции, которые помогут вам легко создать мобильную версию проекта:

Resize desktop to mobile. Виджеты сохранят то же положение, что и в десктопной версии, но их размеры изменятся в соответствии с шириной мобильного вьюпорта.

1:1 desktop layout. Эта опция воссоздаст десктопную версию с исходными пропорциями. После этого вы сможете вручную передвигать виджеты и изменять их размер.

Все эти опции (включая Auto Layout) могут быть также активированы только для некоторых выбранных вами виджетов, а не всего лэйаута целиком (кроме глобальных виджетов — виджетов On all pages).

Для этого выберите не менее двух виджетов и нажмите на кнопку Auto Layout, Fit to mobile или Desktop layout. В результате изменятся положение и размер только этих виджетов.

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

Планшетная версия

Дополнительно вы можете создать планшетную версию вашего проекта, которая также будет отображаться в мобильном вьюпорте при повороте телефона в горизонтальное положение. Кликните на иконку «плюс» рядом со значком мобильной версии и включите опцию Tablet and Landscape Mobile. Чтобы деактивировать планшетную версию, отключите эту опцию и нажмите на значок «минус».

Если у вас не активна планшетная версия, при повороте телефона в горизонтальное положение отобразится десктопная версия проекта. На планшетах в пейзажной ориентации всегда отображается десктопная версия проекта.

Шорткаты

Используйте клавиши на клавиатуре для переключения между десктопной (1), планшетной (2) и мобильной (3) версиями проекта. Эта функция доступна и в редакторе, и в режиме предпросмотра (Preview).

Высота страницы

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

Кастомная ширина

Изменить ширину мобильного вьюпорта вы можете в настройках Grid & Layout.

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

Мобильная версия на разных устройствах

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

iPhone SE (вертикальная и горизонтальнаяориентация)
iPhone 11 Pro/X
Google Pixel 2 XL
Samsung Galaxy S20

Также на этом же экране вы можете проверить отображение проекта на планшетах (в том случае, если вы не активировали планшетную версию проекта дополнительно).

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

Версии проекта на разных экранах

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