Locking Landscape Device Orientation

Question

am developing a phonegap application and have an issue with the device orientation.

Basically I want the user to be free to use the device as he/she wishes to, either portrait or landscape. However, I only want the screen to turn to Portrait or Landscape. Currently the screen is also turning reverse landscape.

Is it possible to limit the orientation changes to portrait and landscape only? (so you would have a total of 2 orientation change possibilities rather than 3).

EDIT

I have used a plugin (suggested below) and came up with the below code that works. Once the screen is rotated to reverseLandscape, it is displayed in landscape mode instead (exactly what I wanted). However the issue is that if the user turns the mobile in portrait mode, the orientation is locked and would not turn back to portrait.

    $(window).bind('orientationchange', function(event){

    if (event.orientation == 'landscape') {
     navigator.screenOrientation.set('landscape');
    } 
    if (event.orientation == 'portrait') {
     navigator.screenOrientation.set('portrait');
    }

   });

Anyone has any idea where I should put the following line so that it unlocks the orientation?

navigator.screenOrientation.set('fullSensor');

score 2 · Answer 1 · edited May 23 '17 at 12:08

You will need to change main Phonegap Activity class. First remove this line from AndroidManifest file:

android:screenOrientation="portrait"

We still need:

android:configChanges="orientation|keyboardHidden"

Unfortunately we can't configure more then one orientation mode in screenOrientation. Because of that we will change it through java code.

This is a working code example:

package com.roadrunner.mobile21;

import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.view.Display;
import android.view.OrientationEventListener;
import android.view.Surface;

import com.phonegap.*;

public class RoadRunnerActivity extends DroidGap {
    OrientationEventListener myOrientationEventListener;    

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");

        myOrientationEventListener = new OrientationEventListener(this, SensorManager.SENSOR_DELAY_NORMAL){

            @Override
            public void onOrientationChanged(int arg0) {

                Display display;         
                display = getWindow().getWindowManager().getDefaultDisplay();
                int rotation = display.getRotation();   
                if(rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_90) {
                    unlockScreenOrientation();                      
                }        
            }                
        };  
        if (myOrientationEventListener.canDetectOrientation()){
            myOrientationEventListener.enable();
        } else{
            finish();
        }         
    }


    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        Display display;         
        display = getWindow().getWindowManager().getDefaultDisplay();
        int rotation = display.getRotation();   
        if(rotation == Surface.ROTATION_180 || rotation == Surface.ROTATION_270) {
            lockCurrentScreenOrientation();                     
        } 
    }  

    private void lockCurrentScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    private void unlockScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
    }    

}

There is also a possibility to alter screen orientation through css. I dont like because it is a little bit buggy but here you can find more about it. It is an easiest way but you will need to play a little to make it work.

This will easily do it:

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

you will need to change a formula to only accommodate 0 and 90 degree orientation.

when I added android:screenOrientation="landscape|portrait", I get an error: String types are not allowed. FYI I am working in Android — user1809790, Dec 21 '12 at 11:33
I tried to replicate what you have, however I am still getting an error when putting the screenOrientation to landscape|portrait. It gives me the following error: Error: String types not allowed (at 'screenOrientation' with value 'landscape|portrait'). — user1809790, Dec 21 '12 at 12:23
Tell me your android:minSdkVersion value from AndroidManifest? — Gajotres, Dec 21 '12 at 12:30
Ok, lets do it programmatically. I will add another chapter in my answer. — Gajotres, Dec 21 '12 at 12:49
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21517/discussion-between-user1809790-and-gajotres) — user1809790, Dec 21 '12 at 12:59
I have changed java code, this example is working for me. Android SDK version 8. — Gajotres, Dec 21 '12 at 17:10
unfortunately this did not work again :( Might be since im using a different SDK version — user1809790, Dec 21 '12 at 18:50

A. Magalhães · Answer 2 · 2012-12-21T11:12:44.470

0

I think you just need use:

<meta name="viewport" content="width=device-width, initial-scale=1">

to limit 3 orientation changes.

EDIT:

Try this using screen-orientation Plugin:

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    document.addEventListener("orientationChanged", updateOrientation);
}

function updateOrientation(e) {
    switch (e.orientation) {
        case 90:
            navigator.screenOrientation.set('landscape');
            break;
        case -90:
            navigator.screenOrientation.set('landscape');
            break;
    }
}

edited Dec 21 '12 at 11:12

answered Dec 21 '12 at 10:45

A. Magalhães

1,511
2
22
31

I need to limit it to two orientations only not three. The orientations I require are: portrait and landscape only. I do not wish to have reverse portrait or reverse landscape – user1809790 Dec 21 '12 at 10:47
I tried using this solution as well but funny enough it does not work. When I try to set the orientation outside the switch statement it works, however it does not work inside the switch statement.. – user1809790 Dec 21 '12 at 12:34

score 0 · Answer 3 · answered Dec 21 '12 at 17:57

0

Look at this, i once used it for what you are talking about.

http://www.devinrolsen.com/javascript-mobile-orientation-detection/

or

http://www.williammalone.com/articles/html5-javascript-ios-orientation/

Hope you get it to work :)

answered Dec 21 '12 at 17:57

Daniel

2,002
5
20
32

With this you can control what side you want to enable, and you can put state variabels in the if sentenses, or whatever you want to do. :) Merry xmas :) – Daniel Dec 21 '12 at 17:58

Locking Landscape Device Orientation

3 Answers3

Linked