Does anyone know how to lock screen orientation to portrait on android app created with Intel XDK ?
I give up, after the bottom 3 attempts I am posting the entire html document, maybe you can figure out what am I doing wrong:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
intel.xdk.device.setRotateOrientation('portrait');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<h1 class="align-center">Testing orientation lock</h1>
<p class="align-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada risus libero, nec consectetur nunc vestibulum quis. Nam rhoncus ullamcorper dui, vitae imperdiet augue vulputate non. In non sodales dolor. Maecenas sagittis, erat a consequat sollicitudin, enim metus feugiat sem, vel varius mauris eros vitae sapien. Vestibulum sollicitudin arcu eleifend augue feugiat sagittis a non arcu. Duis tempus laoreet faucibus. Morbi fermentum placerat lacus et consectetur. Aenean convallis diam in congue convallis. Ut at ullamcorper mauris. Fusce suscipit tincidunt lacus, et volutpat arcu bibendum eu. In vehicula mi lorem, eget vestibulum orci cursus ac. Etiam vitae quam ut ipsum accumsan viverra. Proin commodo augue diam, tincidunt pretium purus interdum et. Suspendisse tristique vehicula tempus. Praesent ultrices nibh et tortor venenatis, at laoreet augue sodales.
</p>
</body>
</html>
I already tried adding the following to my head tag and it didn't work...:
<script type="text/javascript" language="javascript">
function onDeviceReady() {
AppMobi.device.hideSplashScreen();
//lock orientation
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function openNewWindow(url){
AppMobi.device.showRemoteSiteExt(url);
};
</script>
UPDATE
I also tried adding the following in the intelxdk.config.additions.xml :
<preference name="Orientation" value="portrait" />
..and it didn't work...
UPDATE 2
I also tried :
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('portrait');
intel.xdk.device.hideSplashScreen();
}
</script>
After trying everything I could find and think of, I ended up using this (GitHub link) plugin.
Download the GitHub archive.
Copy the plugin.xml and src folder to your root file.
Copy screenorientation.android.js, screenorientation.bb10.js, screenorientation.ios.js and screenorientation.js to your www folder.
Add the following into your index.html head:
<script>
screen.lockOrientation('landscape');
</script>
...you can change landscape to portrait if you want.