To celebrate an imminent release of jQuery Mobile I’ve decided to cover it once again. I don’t know if version 1.5 is going to be successful in bringing it back to the previous glory, I can only hope. So let’s for a change write something that’s not related to AngularJS products.
What to do, what to do? I remember when I was still working with jQuery Mobile, locking application orientation was such a pain in the neck. Today it can be easily done using Cordova Screen Orientation plugin.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.



Before we can start, make sure you have everything configured correctly.
You will need to have these:
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Cordova
If you don’t have everything mentioned here please take a look at this article for more information: Building a Native Mobile App with Cordova and jQuery Mobile.

1. Update Cordova

Don’t forget to update Cordova, older versions may not work with this tutorial:
npm update -g cordova

2. Create a New Project

cordova create JQMOrientationDemo
cd JQMOrientationDemo
Warning: Since a few of my readers never worked with Cordova CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
At this point, we need to upgrade JQMOrientationDemo project with an appropriate platform. Because I’m using Windows we’re going to create an Android application:
cordova platform add android
if you’re a MacOS user, create an iOS application like this:
cordova platform add ios

3. Install Screen Orientation Plugin

Next, we need to import and install screen orientation plugin into a newly created project:
cordova plugin add net.yoik.cordova.plugins.screenorientation
If you’re using Cordova 4.0 or any higher version, you will also need to install WhiteList plugin. Without it we will not be able to access remote content plus application will spam console log with warning messages.
cordova plugin add cordova-plugin-whitelist
And add this security meta tag to your index.html file:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">


At this point, you should have everything set up and ready, we can begin.
For example, during the app initialization, if we want to lock screen orientation, we can use this code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
One last thing, because we’re working with Cordova we also need to include cordova.js file. Just add this line to your main HTML file:
<script src="cordova.js"></script>
That’s everything, during the build process Cordova CLI will automatically prepare this file for us.
Continue to the next page

  • Dinesh Raja

    Is there any difference among using this plugin and using this preference “” in config file?

    • Yes, there is if you’re using it on any Android device older than 4.4. Some older device browsers had this feature partially implemented or not at all. This plugin is using pure Java/iOS to determine screen orientation and it’s not depending on browser values.

  • Kurtulus B.

    I did everything and not working.