Side Menu display in smart-Phone like TAB

Support
#1

I have created responsive side menu in my app using the template in Studio. If I resize the screen in my desktop, it works nicely i.e. side menu size and appearance is changed based on the size of the window. However, when I run the app from a smart-phone (iPhone 6S) the side bar is still displayed (narrower though) instead of just a Button as menu. FYI, I have not used any agent in screen design. If I use PHONE agent for example, the menu panel shows up on top instead of a button to popup the menu that I don’t want.

It seems the the resize functionality is working partially, How can make the side menu fully responsive based on the size of the devices?

second point is, the screen font display very small, how can I keep the fonts similar to my Phone’s standard font size?

Thanks for your help.

#2

Hi,
If you target your application for mobile devices you can enable “device width” mode instead of “emulated page width” using cuba.web.useDeviceWidthForViewport property in web-app.properties file:


cuba.web.useDeviceWidthForViewport = true

Also you can use “cuba.web.pageInitialScale” property in order to set initial viewport scale. It has value 0.8 by default.

If you enable useDeviceWidthForViewport then SideMenu will work as expected on mobile phones and tablets.

#3

Thank you so much.