I'm building a iPhone Web Application and want to lock the orientation to portrait mode. is this possible? Are there any web-kit extensions to do this?
Please note this is an application written in HTML and JavaScript for Mobile Safari, it is NOT a native application written in Objective-C.
You can specify CSS styles based on viewport orientation: Target the browser with body[orient="landscape"] or body[orient="portrait"]
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
However...
Apple's approach to this issue is to allow the developer to change the CSS based on the orientation change but not to prevent re-orientation completely. I found a similar question elsewhere:
http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
I have a similar issue, but to make landscape... I believe the code below should do the trick:
//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
var orientation = window.orientation;
if (forceOrientation != undefined)
orientation = forceOrientation;
var domElement = document.getElementById('fullscreen-element-div');
switch(orientation) {
case 90:
var width = window.innerHeight;
var height = window.innerWidth;
domElement.style.width = "100vh";
domElement.style.height = "100vw";
domElement.style.transformOrigin="50% 50%";
domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
break;
case -90:
var width = window.innerHeight;
var height = window.innerWidth;
domElement.style.width = "100vh";
domElement.style.height = "100vw";
domElement.style.transformOrigin="50% 50%";
domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
break;
default:
domElement.style.width = "100vw";
domElement.style.height = "100vh";
domElement.style.transformOrigin="";
domElement.style.transform="";
break;
}
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
<div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
<br>
<input type="button" value="force 90" onclick="processOrientation(90);" /><br>
<input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
<input type="button" value="back to normal" onclick="processOrientation();" />
</div>
</body>
</html>