Disable landscape mode for responsive mobile web app

How to disable landscape mode for responsive web app(especially for mobile)? If not possible then, If user comes to landscape is there a way to turn the page 90 degrees?

Thanks,

Sreeni

Hi NSreenivasulu Reddy

Thanks for posting this question in this form.

As of now you can set up the orientation for both landscape and Portrait mode . You can find deeper information in below article

https://opensource.hcltechsw.com/volt-mx-docs/docs/documentation/Iris/iris_user_guide/Content/ResponsiveGridLayout.html

As of now to restrict the orientation is available for mobile channels when you are designing it for native mobile applications where as for responsive web application this feature does not exists to restrict the orientation.

We are checking internally once again and will post a update once we have some information.

FWIW, I have played around with this and cannot get it to work. I wanted to include the following information for reference as I have tried numerous options:

This article outlines a couple of options:
https://themes.artbees.net/forums/topic/disable-landscape-orientation-on-mobile/

The <meta> tag mentioned in the above link, when added to the Project Settings -> Responsive Web -> HTML Head section when used in conjunction with the screen.orientation.lock() method does not appear to affect the behavior.

The link https://code-boxx.com/lock-screen-orientation/ referenced in the above link provides 3 approaches. I specifically avoided creating a custom HTML page with accompanying CSS and JS rendered in a browser widget because I wanted to focus on using the Responsive form designer and just the JS code. I forced the app to run full screen by installing it to the Home screen on the device (Android 10, Galaxy S9) as I read the screen.orientation.lock() method will only work when running in full screen (you will see this message in the browser debug console when trying to use it), however using the lock() method in the init event as well as the preShow event for a responsive web form did not work in fullscreen. I built the app as a PWA and still had no luck.

In the following link there is a reference to also modifying the Android manifest using Firefox Android, however I also could not get it to work:

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation#firefox_os_and_android_orientation_lock_using_the_manifest

Unfortunately I could not find a solution, but hopefully this information helps save some time researching as well as provide some additional testing methods.

Cheers,

Gunndarr