Cordova Plugin Screen Orientation

This Cordova plugin mainly works for the orientation of the device screen. It is used to set or lock the screen orientation for Windows, iOS, and Android platforms. This plugin is based on the Screen Orientation API, due to this, API matches to the current specification.

// for the current screen orientation
.orientation
// for locking the screen orientation to portrait mode
.orientation.lock('portrait')
// for unlocking the screen orientation
.orientation.unlock()

Installation:

To add this plugin in your app, you have to install it by typing the below command:

Supported Orientations

portrait-primary: It is a primary portrait mode orientation.
portrait-secondary: It is a secondary portrait mode orientation.
landscape-primary: It is a primary landscape mode orientation.
landscape-secondary: It is a secondary landscape mode orientation.
portrait: It is either a portrait-primary or portrait-secondary mode orientation.
landscape: It is either the landscape-primary or landscape-secondary mode orientation.
any: It supports all the orientations (orientation is unlocked).

Usage:

// To lock the screen orientation in portrait mode
screen.orientation.lock('portrait');
// To access the current screen orientation
console.log('Orientation ' + screen.orientation.type);
// To allow a user to rotate a screen
screen.orientation.unlock();

Events:

The orientationchange event is fired from the Android and iOS platforms on the window object. The current version of this plugin allows a user to use the window object for receiving the notifications.

Example:

window.addEventListener("orientationchange", function()
{
    console.log(screen.orientation.type); 
});

Android Notes:

For the Android platform, when the device is rotated 180 degrees, screen.orientation property does not update.

Windows UWP Notes:

When we talk about the Windows platform, Windows-UWP (Windows Store Apps) only displays the changed orientation, if the device consists some sort of accelerometer. It remains in the internal state of the orientation, but the device screen does not rotate unless the device supports it.

Code

HTML:

<h1>Screen Orientation Lock</h1>
<button class="lock">Lock</button>
<button class="unlock">Unlock</button>
Device Lock State: <select>
  <option value="unlocked">Unlocked</option>
  <option value="landscape-primary">Landscape Primary</option>
  <option value="landscape-secondary">Landscape Secondary</option>
  <option value="portrait-primary">Portrait Primary</option>
  <option value="portrait-secondary">Portrait Secondary</option>
  <option value="portrait">Portrait</option>
  <option value="landscape">landscape</option>
  <option value="any">Any</option>
  <option value="natural">Natural</option>
</select>

JavaScript:

var device_fullscreen = {
  request: function(elem){
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  },
  exit: function() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
};
var LockOrientationchange = function() {
  console.log('changing')
  if(this.value !== 'unlocked') {
    window.screen.orientation.lock(this.value);
  } else {
    window.screen.orientation.unlock();
  }
};
$('.lock').on('click', function() {
  device_fullscreen.request(this.parentNode);
  LockOrientationchange.call($('select')[0]);
});
$('.unlock').on('click', function() {
   device_fullscreen.exit();
});
$('select').on('change', LockOrientationchange);

Output: