User Mobile Device Detection

   MaestroThe UI design product.  |    Form Builder Template Designer |  All versions This feature is related to all versions.

When building adaptive UX in Maestro you may run into a requirement to present different content to users depending on whether they are on a mobile or desktop client. For example, it is unlikely that desktop users will utilize their camera to snap a photo of their driver's license so you may want to down-play this capability for desktop users and promote it for mobile users.

Unfortunately there is no standard way to determine if a user is on a mobile device and a Google search will uncover strong debate over the best way to achieve this. This example provides one simple option that searches the user agent string for a set of known mobile or tablet identifiers.

Let's look at the example of 'Is Mobile' Detected

The following JavaScript snippet demonstrates a simple example on how to detect if the user is on a mobile (or tablet) device. This will not give 100% coverage but should cover most of the commonly encountered devices.

You could add this code directly into your rule scripts, or create a reusable JavaScript library that you can distribute among your teams.

For more fine-grained detects you may want to review the Modernizr library which provides a comprehensive analysis of the HTML, CSS and JavaScript features the user's browser has to offer https://modernizr.com/

To using Modernizr in Maestro:

1. Build your custom modernizr-custom.js file on their website and download it.
2. Add a JavaScript library to your form and upload your Modernizr JS file.
3. Now in your rule scripts you can use the Modernizr detects, for example, if (Modernizr.touchevents)