CODEWITHSUNDEEP
iphoneipadwebkitrotationorientation
BoomShaka
BoomShaka

Reputation: 1791

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.

Upvotes: 7

Views: 10601

Answers (6)

mohdajami
mohdajami

Reputation: 9680

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.

Upvotes: 5

user1299416
user1299416

Reputation: 1

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

Upvotes: 0

meo
meo

Reputation: 31249

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

Upvotes: 0

Michael.G.Dupee
Michael.G.Dupee

Reputation: 1

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

Upvotes: 0

Ian Storm Taylor
Ian Storm Taylor

Reputation: 8680

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

Upvotes: 1

Brian Cully
Brian Cully

Reputation: 546

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.

Upvotes: 3

Related Questions