Views in Landscape or Portrait

Hello everyone.

I’m a new developer and I have to do a app with ionic.
The designer, (I’m only the programmer and I do all the magic xD) wants views in landscape and others in portrait mode…

How can i do that?

For example, I have a view for sign in and needs to be in portrait mode, but when the user sign in the app, the next view need to be in landscape…

Really I don’t know how to start.

Thank you.

I really hope there is a good UX design reason to force the user to rotate his device between screens.
There are good reason very very few apps use this…
But there might be… I can think of a few edge cases
App Screen Orientation options are set in config.xml and there one can lock an app to portait / landscape only or both if needed

To do what you need one would need code to force screen rotation and lock / unlock the auto rotation on runtime…and prevent the usual behaviour

I think its not possible to use JS code only … maybe a cordova plugin could do this but probably not easy.

What you can do is lock screen orientation of app … to portrait or whatever the start state is …for example … and then
try to rotate 90 degrees (with css transform - {transform : rotate(90deg)} ) and resize the views contents container DIVS you want landscape …
I would recommend to use device gyroscope to find out the current orintation and show a small animation overlay to signal and remind the user he should rotate the phone .

I guess this rotation approach probably will not work well for scrolling full height lists or some IONIC components like navbars…or maps .
but maybe the rotated views contents don’t need those so this components.
Text images buttons, forms and abosoute positioned stuff should work well

Hope that helps

Andy Retinafunk

Thank you so much for the explication.
I found a plugin that helps me :smiley:

Thank you so much.

Nice ., glad it works . care to post the link or name of the plugin, if I ever come across such a project.

ALso if its a public app I would love to take a look at the app when ready

Andy Retinafunk

This plugin : [Cordova Plugin Screen Orientation] (https://github.com/apache/cordova-plugin-screen-orientation)

Here is the how I implemented:

document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady(){
screen.lockOrientation(‘landscape’); // or ‘portrait’
};

In each controller of view. Do you think that I’m doing well? :open_mouth:

2 Likes

its working fine… for first time…

but when again go to that controllers-> view…

orientation doesnt change for second time