SetDeviceBreakpoints not working
Question
Application Type
Reactive
Service Studio Version
11.12.4 (Build 50959)

From https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Responsive_UI, I understand that I can override the default breakpoints. However after setting the PhoneWidth and TabletWidth for the DeviceConfiguration parameter, the breakpoint for Tablet does not seem to work.

For example, I have set PhoneWidth to 768 and TabletWidth to 992. I can see from the browser developer console that the body class changes to phone when the device width goes below 768 and change to tablet when the device width goes >= 768. But when it goes >= 992, it does not change back to desktop.

I have included my OML as a sample.

JKTest.oml

Hello Jeremy,

Hover your mouse on this line and you can see the dimensions, However it depends on screen type,

Please check these   for better understanding:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}



I hope this will work for you,

Thanks &Regards

Tousif

Hi Tousif,

Please see the screen captures from Google Chrome Browser.

The above is when SetDeviceBreakpoints is added to OnApplicationReady.

Then I have tried to disable SetDeviceBreakpoints and the below is the result that I have gotten. It shows desktop when it is only Laptop - 1440px.

Then, I have asked my colleague to try it works as per expected. Then, I have decided to try it on my laptop screen instead on my extended screen and it works as expected.

So now the problem lies with it being on an extended screen?

It depends on  screen to screen, not all screen have same resolution,  Instead of targeting specific devices, we can try specifying a general screen size range, then distinguishing between retina and non-retina screens. There are lot  of different  devices so we can’t  define fixed breakpoints for each of them.
we can’t say that there is a standard resolution for devices, but there are some commonly used breakpoints -

320px — 480px: Mobile devices

481px — 768px: iPads, Tablets

769px — 1024px: Small screens, laptops

1025px — 1200px: Desktops, large screens

1201px and more —  Extra large screens, TV

these breakpoints can differ from screen to screen but these common we use.

I thing this will solve your problem.

Champion

Hello Jeremy 

It seems the Breakpoint you have added are working correctly. With the Width > 992 it shows the Desktop and same way it is working for Phone and Tab as well. Please do remember it will change on > not in >= 


Please feel free to ask in case your doubt is not cleared yet. Also, if it doesn't work for you let us know the Browser to check with same. 

Hi Manish, Thanks for your reply, I have posted a reply to another suggested solution. 

https://www.outsystems.com/forums/discussion/74009/setdevicebreakpoints-not-working/#Post303553

Hi Jeremy,


I'm struggling with the exact same issue. Did you manage to find a solution for it?



I'm also having issues with this in a reactive pwa app.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.