Freezing portrait mode


#1

What’s the recipe to constrain an app. To portrait mode?


How to lock screen orientation in ionic
#2

If you are developing this for iOS, your best bet is to use the Device Orientation options in Xcode. I have mine set to ‘Potrait’ only for iPhone. In iPad, I allow all orientations.

I’m not sure if Ionic offers an option to prevent orientation changes.


#3

Thanks @Calendee!

A slightly different question then…

From a web browser loaded ionic application on a phone, are there “rotation” events available within javascript/ionic? I want to move things around, in some cases, if the user is rotating the phone.


#4

You could use screen.orientation.
It’s something relatively new and at the moment only -moz- fully supports all the methods and event handlers:

In a year or two you’ll be able to use these methods on all the updated browsers :slight_smile:

Actually, you can use:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

to detect which number corresponds to the orientation of your device (some devices use backwards values, but they usually are 90,-90 for landscape and 0,180 for portait).
Alternatively you can also use window.watchMedia, which closely resembles CSS syntax:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

EDIT:
Also, you could take a look at this: it’s an example I found in the Safari Developer Library.
Nothing new, Apple prefers to use screen.orientation :slight_smile:

EDIT 2:
Continuing searching into the Developer Library I found an interesting Class Reference:
DeviceOrientationEvent Class Reference.
It’s available in iOS 4.2 and later and you can see if the user is changing the orientation using the iPhone and iPad gyroscope (x, y and z axys)… amazing… :open_mouth:


#5

I’m new here but I found your post, while searching for an answer to locking the orientation on android and found the following on SO http://stackoverflow.com/a/4885663/290025 it allowed me to lock the orientation and keep it that way.


#6

If you are using phonegap I found this in the doc: http://docs.phonegap.com/en/3.1.0/config_ref_index.md.html

Global Preferences

The following global preferences apply to all platforms:

Fullscreen allows you to hide the status bar at the top of the screen. The default value is false. Example:

Orientation allows you to lock orientation and prevent the interface from rotating in response to changes in orientation. Possible values are default, landscape, or portrait. Example:

#7

Today I needed to add portrait lock to my app. At the time of writing adding <preference name=“orientation” value=“portrait” /> in config.xml seems to be the way to go, works with Cordova 3.4.1 and later.

Using screen.orientation directly in javascript in the app is more flexible, but doesn’t seem to have wide support on the phones yet.


#8

I am using these plugins :

$ cordova plugin add https://github.com/Adlotto/cordova-plugin-recheck-screen-orientation.git
$ cordova plugin add net.yoik.cordova.plugins.screenorientation

Then in your app (usualy in config), just check which page that should be portrait or landscape (it’s more flexible rather than global preferences)

//check orientation
console.log('Orientation is ' + screen.orientation);
if(toState.orientation == 'portrait') {
  screen.lockOrientation('portrait');
}else{
  screen.lockOrientation('landscape');
}

Perhaps it will help


How to restrict app rotation?
Restricting orientation of some views
#9

is there a way to lock only the splash screen’s orientation to portrait without locking the whole application


#10

Yes.
In config.xml include following
<preference name="SplashScreen" value="screen" /> <preference name="orientation" value="portrait" /> <preference name="SplashScreenDelay" value="5000" />

and inside $ionicPlatform.ready(function() {}) include following
if(window.navigator && window.navigator.splashscreen) { window.plugins.orientationLock.unlock(); }


How to restrict app rotation?
#11

is it possible to use screen.lockOrientation(‘portrait’); if and only if the device is IPAD? I guess I’m wondering how we might check for ipad in .config


#12

hi people, i’m trying to develop a simple app for read qrCode, it’s work fine but every time that i click scan and start camera app phone turn in landscape(but not window’s simulator), button (home back menu of android bar) orientation change and the text of camera is in vertically.
I need to lock it in portrait mode, but not all app, only this pane/content, it’s possible? how can i do for use screen.lockOrientation()?


#13

Thank you very much!!! I need this for my new shopping list application, and your answer works perfectly!


#14

Ionic2 starter app’s side menu not working in landscape mode.
I created an ionic2 starter app (with type script)

ionic start MyApp --v2 --ts

I fixed in package.son the typescript version to 1.7.5 instead of 1.8.7 which is broken

“typescript”: “1.7.5”,

And then added landscape orientation in config.xml

<preference name="orientation" value="landscape" />

It runs well in an iPAD2 emulator (using Xcode).
But when running on real iPAD2 device (using Xcode),
the app starts but the Side Menu button is not reacting, and the button labeled “Toggle Menu” is also not doing anything.

When I was running without the landscape settings the the side-menu worked well on the real device.

I am new here, I don’t know which component of the stack I need to look for? Ionic, Cordova, Angular,…

Any ideas?


#15

Try using cross walk?

Origin: https://crosswalk-project.org/

With Ionic: http://blog.ionic.io/crosswalk-comes-to-ionic/

It should work as the browser behavior will prevail irrelevant of hardware.