Landscape Orientation Lock

Question

I am developing a phone application and have a problem with the orientation of the device.

Basically, I want the user to have the right to use the device at his discretion, be it a portrait or a landscape. However, I want the screen to display only in Portrait or Landscape mode. Currently, the screen is also reversing the landscape.

Is it possible to limit orientation changes only to portrait and landscape? (so you’ll only have 2 options for changing orientation, not 3).

EDIT

I used the plugin (suggested below) and came up with the code below. As soon as the screen is rotated in reverseLandscape, it is displayed in landscape mode (exactly what I wanted). However, the problem is that if the user switches the mobile in portrait mode, the orientation is locked and will not return to the portrait.

$(window).bind('orientationchange', function(event){ if (event.orientation == 'landscape') { navigator.screenOrientation.set('landscape'); } if (event.orientation == 'portrait') { navigator.screenOrientation.set('portrait'); } }); 

Does anyone know where I should put the next line so that it unlocks the orientation?

 navigator.screenOrientation.set('fullSensor'); 

Answer 1

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

 android:screenOrientation="portrait" 

We still need to:

 android:configChanges="orientation|keyboardHidden" 

Unfortunately, we cannot configure more than one orientation mode in screenOrientation. Because of this, we will change it using java code.

This is an example of working code:

 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 the option to change the screen orientation via css. I don’t like it because it's a bit buggy, but here you can find more about it. This is the easiest way, but you need to play a little for it to work.

This is easy to do:

 $(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 the formula to accommodate only 0 and 90 degrees.

Answer 2

I think you just need to use:

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

to limit 3 orientation changes.

EDIT:

Try using the plugin to orient the screen :

 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; } } 

Answer 3

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 :)