Overview
A page has one set of blocks and up to three looks: Desktop, Tablet and Mobile. You don't build a second page for phones. Switch the builder to a device, adjust the blocks that should look different there, and each visitor gets the look that matches their device.
Native mobile apps also have one mobile-only page setting, Transition Behavior, which sets the animation played when the page opens.
Note: There are no app-wide mobile appearance defaults. The app's Mobile settings group contains only Secure View Mode.
Adjusting a Page for Mobile
Build the page on the base device: Get the page right on the app's base device (Desktop for most apps).
Switch to Mobile: Click the device button (laptop, tablet or phone icon) in the builder's top bar and select Mobile. The canvas resizes to a phone frame.
Change blocks for mobile: Select a block and change its properties. Changes made while Mobile is selected are stored for Mobile only.
Check the base device: Switch back and confirm the desktop layout is unchanged.
What Can Differ per Device
You can change per device | Shared by all devices |
|---|---|
Any property of an existing block: size, spacing, alignment, colors, font size, layout direction, visibility, content (text, labels, image source), bindings and events. | Which blocks exist, their order and nesting, block names, and page-level settings such as page variables, functions, parameters, events, custom code, slug and permissions. |
Tip: To remove a block on phones, hide it with a visibility rule on the Mobile device. Adding or deleting a block always applies to every device.
Note: Editing a block on the base device updates the other devices, except for properties you have already changed on those devices. There is no one-click reset; set the property back by hand on the device that differs.
The list of screen sizes under the device toggles (for example, iPhone 8 or Galaxy S8) only resizes the builder canvas. It is not saved on the page and does not change what visitors see.
Navigation settings use breakpoints rather than these three devices. Desktop corresponds to the XL breakpoint, Tablet to MD (LG for wider tablets), and Mobile to SM. See Responsive Navigation and Responsive Design.
Transition Behavior (Mobile Apps)
In a native mobile app, open Page Settings for the page. Document Title is replaced by Transition Behavior, the screen animation played when the app opens this page. The options are Platform Default, Slide, Fade, None, Adaptive sheet, Full Screen, Fade from bottom and Overlay. See Page Transitions.
Tip: For an onboarding flow, set the onboarding page's Transition Behavior to Fade and the main app page's to Slide for a clear entrance and exit.
Status Bar and Navigation Bar Style
A native mobile app honours a page-level style for the phone's status bar and the Android navigation bar: light, dark or auto. There is no builder control for these today. A page gets them only if it was created from a template that already includes them.
Testing Mobile Appearance
Use the device button in the builder to see the page's Mobile look at phone dimensions.
Use the UnifyApps Preview app on an iOS or Android device to check a native mobile app, including transitions.
Publish to a test environment and open it on a phone for end-to-end testing.