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.

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

回答5:

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)";

回答6:

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();

来源：https://stackoverflow.com/questions/2772691/is-it-possible-to-prevent-iphone-ipad-orientation-changing-in-the-browser

标签

iphone

ipad

webkit

rotation

orientation