Fliplet automatically detects the type of device being used to view an app. The different options detected are:

  • .web: the app is being viewed on a web browser (either a desktop web browser or a mobile web browser. But not a native app)
  • .mobile: the app is being viewed on a mobile device (or web browser if the screen width is less than 640px wide)
  • .tablet: the app is being viewed on a tablet device (or web browser if the screen width is greater than 640px wide)
  • .windows: if the app is viewed on a windows device
  • .ios: if the app is viewed on a Apple iPhone or Apple iPad (not an Apple Mac / laptop)
  • .android: if the app is viewed on an Android device
  • .native: if the app is viewed on an actual device like a mobile phone or tablet
  • .iphonex: If the app is viewed on an iPhone X
  • [data-has-notch]: If the app is viewed on a device that contains a notch at the top (eg iPhone X, Google Pixel 3)

It is also possible to have combinations of the above tags eg: an iOS native mobile device.

The tags are stored in the HTML element of your app (every app has an HTML element that holds all of your screen content. The tags are added to the HTML element as classes or data attributes). When the app is running you can check if the HTML element has the tags by using the following code.

if ($('html.native.mobile').length) {
  // Code here will run if an app is being viewed via a native app with a screen width smaller than 650px (eg a mobile).
}

if ($('html.ios).length) {
  // Code here will run if an app is being viewed via an ios device
}

if ($('html.web').length) {
  // Code here will run if an app is being viewed via a web browser (can be done on mobile or desktop)
}

if ($('html[data-has-notch]).length) {
  // Code here will run if an app is being viewed via a device that has a notch at the top
}