Hello, this is an open question to OutSystems please:

When a page renders, it appears that JavaScript is used to interrogate the device and inject the following information into the rendered code:


Device: desktop, tablet, phone.

Dimension: small, big, hd.

Orientation: landscape, portrait

Browser: chrome, firefox, IE8, IE9, IE10, IE11, Safari, etc.

Operation System: windows, ios, osx, android, ubuntu, linux, unknownos


As a result, some example rendered code = 

<div class="Page startHidden windows chrome en LiverpoolTheme" style="margin-top: 0px;">

and

<script>SilkDeviceDetect.init('desktop big', false, true, 'chrome', true, false, false)</script>


Questions:

Please can you share more detailed information about the "Device", "Dimension" and "Orientation" parameters listed above?

What parameters define: desktop, tablet, phone, small, big, hd, portrait, landscape, please? 

Basically, what widths are used, please? 

What heights are used, please (if any)?


In the absence of Silk UI using @media queries (whereby we could all see what we were working with), it would be more than useful to have this information, please. 


We have examined the following pages but they do not provide the desired information:

https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive

https://www.outsystems.com/evaluation-guide/does-outsystems-support-responsive-web-design/

https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive


Thank you in advance and keep safe, everyone.

Solution

Hi,

First of all you should probably consider moving to OutsystemsUI instead of SilkUI.

That said,


Basically most of your questions is determined by the UserAgent string of the browser.
Check the site-properties of SilkUI-module (webppatterns in my case) to look for the exact regex.
for example:

"(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino"


Furthermore there are some javascript functions in SilkUI as well:

For example here are some snippets

 this.getBrowser = function() {
            var nav = navigator.userAgent;
            
            switch(true) {
                case (nav.indexOf("Trident/7.0") > -1):
                        pageContainer.classList.add("IE11");
                        browser = "IE11";
                        break;
                    case (nav.indexOf("MSIE 10") > -1):
                        pageContainer.classList.add("IE10");
                        browser = "IE10";
                        break;
                    case (/Firefox/gi.test(nav)):
                        pageContainer.classList.add("Firefox");
                        browser = "Firefox";
                        break;
 
this.getDevice = function() {
            var windowWidth = getDeviceWidth();
            var windowHeight = getDeviceHeight();
            var isLandscape = pageContainer.classList.contains("landscape");
            
            var phoneMax = 420;
            var tabletMax = 1024;
            var desktopSmallMax = 1366;
            var desktopMax = 1600;
            var desktopBigMax = 1920;


I would recommend to open silkUI yourself and check the javascript to get a better idea.

Hope this gives you enough information.

J.

p.s. you can still work with @media btw, becausesilkUI also uses that, so you can override stuff :)

Solution

Hi J,

Thanks ever so much, that's really helpful :)

Best wishes, Sue.