Skip to main content

Preview on different devices

Apps are used on all kinds of screens: a desktop in the office, a tablet in the warehouse, a phone on the road. The device preview shows your app at the size of a chosen device, so you can check the layout before you publish. You do not need the physical device.

The preview toolbar sits above the app preview, both while you are building and when you open a saved version.

Switch to a device size​

By default the preview is responsive: it simply fills the available space.

  1. Click the responsive preview button at the left of the preview toolbar. The device buttons appear.
  2. Click Desktop, Tablet or Mobile to preview the first device of that type, or click the small arrow next to a button to choose a specific device from the list.
  3. The preview resizes to that screen. The toolbar shows the device name and its size in pixels, such as 390 x 844.

Click the responsive preview button again to go back to the responsive view.

Rotate the screen​

For tablets and mobile devices, click the rotate button to switch between portrait and landscape. The width and height swap. Desktop previews cannot be rotated.

Add your own device​

If your users have a device that is not in the list, add it:

  1. Click the arrow next to Desktop, Tablet or Mobile, depending on the kind of device.
  2. Click Add custom.
  3. Enter a name, the width and the height in pixels, and click the check mark.

The new device is selected right away and stays in the list for later sessions. To remove one, click the bin icon next to it in the list.

Tips​

  • Preview before you publish. A table that looks good on a desktop may need fewer columns on a phone.
  • If the layout does not fit, tell App Builder what you want for each device in a prompt. For example:
Make the layout work on a phone screen as well as on desktop. On a phone, show the order list as cards, one per row, with order number, supplier and status, and put the filters behind a Filter button.
  • The preview only changes the size of the screen. Touch behaviour and the browser on a real device can still differ, so do a final check on a real device for apps that are used in the field.
  • If the app has in-app roles, use Simulate Roles next to the device buttons to check what users with a given in-app role see.

Further reading​

Last updated on