Display on Device providing incorrect results

I am developing an app that is intended to work on a variety of mobile phones and tablets, whatever the end-user already has.  Additionally, it needs to work on the low-cost Android boxes that attach to TVs/Monitors.  I have tested the Display On Device component using a very simple app that displays what OutSystems reports the device to be, either a phone or a tablet.

My results on 4 devices tested thus far are:

  1. Samsung Galaxy 6 - reported as phone (correct)
  2. Nextbook NX7850C - reported as tablet (correct)
  3. Alcatel A30 - reported as phone (incorrect!)
  4. X96mini TV attachable box - not recognized as either a tablet or phone

So, item 3 above is an error.  And, although item 4 is technically correct that it isn't a phone or a tablet, it would be best if I could treat it as a tablet.  There is no third choice for anything like "other".

Does anyone have insights into what criteria Display on Device is using, and how I can override it in my app for specific devices?  

Thanks!  -- Joel

Hi Joel,

You should read this: https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive

In any case, the piece that seems more important here is this:

How it Works

There’s a snippet of JavaScript that runs on first page load and that finds out, through its user agent or viewport width, what the device is: desktop, tablet or smartphone.

So, the device is detected both by the User Agent that is provided as well as the width of the viewport.

In order to understand why the Alcatel is being detected as phone, you need to verify which user agent it is providing and which is the viewport width.

Eduardo Jauch

Thank you, Educardo.  That helps me to understand what is going on.  So, if I understand correctly, the device type (either tablet or phone) is being set on the first page load of the app.  Therefore, if the setting is not being done correctly, there should be some system variable that I can change after the first page load on specific devices.  

Any guidance on how I can find that variable and change it after the first page load?

Thanks again!

  -- Joel

Hi JM,

As far as I know, the information is set on a cookie in the device (for Web Applications).
Or are you using Mobile app (I'm assuming no).

Eduardo Jauch

Eduardo, I am using Mobile app.  That is where I am encountering the problem.  It is mis-recognizing or not recognizing the device type.

I am thinking that I may have to forego using the Display on Device component, and instead build in a process for the user to identify or select whether the device should be treated as a phone or a tablet.  However, it would be much better if the Display on Device component could correctly identify the device type.

  -- Joel

Hello Joel,

I will not say that it is impossible to be a problem in Silk UI.

But I will say that is much more probable that the device is the problem and is not identifying itself properly...

If Silk UI is not being able to identify it, you probably will find the same problem...


Eduardo Jauch

Actually, I agree with you that it is most likely a problem with the device, which is causing the Display on Device to misinterpret the device type.  I'm sure it will be a problem that we'll likely encounter with lots of devices.  And, for others developing Mobile apps it may also be a problem.

We're creating a Mobile app that will need to be able to run in the real world on the installed base consisting of lots of different devices - we can't control what devices the users have.  So I need to have a way to override the system's perception of the device type when those anomalies are encountered.  That's why I'd like to find out where OutSystems is holding that information and, for such exceptions, override it with information from the user about what kind of device they are using (or, based on the device model we may know that the perceived device type should be overridden. 

Thanks again, Eduardo!

  -- Joel

Hi Joel,

As you understood, the cookie method described by Eduardo applies to web apps. In this scenario, I'd try to configure site properties (WebPatterns) Regex_Phone_old / Regex_Tablet to match the device user agent.

For mobile apps, afaik it works by relying on specific class names (eg phone, tablet) added to the html body element. Not sure if there's detailed documentation on that though - I'd suggest you create a topic under the Silk UI Mobile component (Forge) in order to give feedback to the team on your use case.

Hi Paulo,

In web the workings are similar. After silk ui detects the device, it adds the classes to the div that is around every page (not the body). I need to check this on mobile.


In mobile apps, if you want to override the chosen classes by the "correct" ones, defined by the user configuration, it should be fairly easy.

Run a JavaScript at the OnReady event to fix tje classes the system added. 

I suggest to use the same classes thou, to avoid having to rewrite every single CSS classes in the system.

As a note, I'm not sure your app will work on every device put there... Don't know if there are a minimum mobile os version, but the OutSystems  Now used to have...

You should talk to OutSystems Silk Ui mobile anyway, like Paulo recommend.


Eduardo Jauch

Silk UI and UI Framework use a method called User-Agent sniffing.

The article shared by Eduardo explains exactly why the Silk UI team decided to use this method, even though it is considered poor practice nowadays since they have to constantly update regex patterns and other stuff in order to identify most devices.

Of course, not every single device will be properly identified this way, which seems to be the case of the Alcatel and X96mini devices you mentioned.

Perhaps you could open a thread in the Silk UI Web and UI Framework components with the User-Agents of these devices so the team can include them?