Is it possible to prevent iPhone/iPad orientation changing in the browser?

I've seen similar questions on this issue, but they are related to native apps. I build web apps for the iPhone/iPad that run in the browser (Safari).

I was wondering if there is a way to prevent orientation change in the browser, perhaps via some meta tag. I know of the viewport meta tag which allows you to specify scale and zooming capabilities, so figured maybe there is something similar for orientation.

I doubt it is possible, but I thought I'd just pop a question on here to开发者_开发知识库 see.

---

You can detect orientation changes with onorientationchange.

Javascript:

/*window.orientation returns a value that indicates whether iPhone is in portrait mode,    landscape mode*/
window.onorientationchange = function() {
var orientation = window.orientation;

switch(orientation) {
    case 0:
         //Portrait mode
    case 90: 
         // Landscape left
    case -90:
         //Landscape right
}

It's written in iPhone doc. Here from iPhone docs.

---

It does not appear to be possible to prevent orientation change, but you can detect it with the code mentioned above.

If you want to prevent orientation change it appears as though you'll need to build a native app using WebKit which quashes the event.

---

You could be really tricky and rotate the body of the website to counteract the orientation change if nothing else works...

---

why can't you just put a event.preventDefault() inside the function?

---

you can not prevent it, but you can change the orientation of the body, according to the orientation of the ipad.

Use medopal's Answer to detect the orientation and change the orientation of your body.

for example:

document.getElementsByTagName("body")[0].style.webkitTransform = "rotate(-90deg)";

---

This bit of code will keep the orientation at -90 degrees (nice for landscape mode, iPad 2's cover will be hanging over the back). Put this under the end body tag in a script, or wrap the last two lines in an onready call.

function orient() {
    var keepOrientationAt = -90;
    var rotate = "rotate(" + (keepOrientationAt - window.orientation) + "deg)";
    document.getElementsByTagName("body")[0].style.webkitTransform = rotate;
}

window.onorientationchange = orient;    
orient();