Skip to main content

Hi Community,

 

I've been tasked with solving the following issue: Show a different screen type when device is a tablet. The first thing that comes to mind is the Breakpoint setting under Screen types > Form. Unfortunately this won't work due to the fact that your average tablet has a greater resolution than the average computer screen. 

When using CSS in websites this issue can be solved quite easily. The following solutions are available through the use of media queries. 

Solution 1: use a media query that checks the DPI or DPPX of the device. https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

Solution 2: use the input type of the device to check device type: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
The second solution might break when using a 2-in-1 laptop with touchscreen OR a tablet with keyboard and mouse.

The question is: Is it possible to change screen type based on the input type / device type / DPI / DPPX within Software Factory?

If the answer is “No” follow-up question: Should I make a separate Idea topic or will this topic suffice?

Our team uses Universal GUI.

Hi Stephen,

First of all, sorry for our late response.

We checked the details for this question and the good news is: our breakpoint mechanism already takes the DPI into account.

Technically we compare the value from the SF in javascript with window.innerWidth, with some corrections for the listbar of course.

As you can read here a different DPI for example on an IPhone results in a different "CSS pixel” value.

I hore this answers your question.

Best regards,
Erik