Prevent Orientation Change in iOS Safari

Prevent orientation change in iOS Safari

There is no way to force a particular orientation in Mobile Safari; it'll always autorotate when the user rotates their device.

Perhaps you can display something for unsupported orientations informing the user that the orientations aren't supported, and that they need to rotate the device back in order to use your web app.

Prevent Safari/iPad to go in landscape mode

It’s not possible to prevent this. It’s a browser feature, and this cannot be controlled using JavaScript.

How do I lock the orientation to portrait mode in a iPhone Web Application?

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

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

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.

How can I disable landscape orientation?

To disable orientations for a particular View Controller, you should now override supportedInterfaceOrientations and preferredInterfaceOrientationForPresentation.

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    // Return a bitmask of supported orientations. If you need more,
    // use bitwise or (see the commented return).
    return UIInterfaceOrientationMaskPortrait;
    // return UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskPortraitUpsideDown;
}

- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
    // Return the orientation you'd prefer - this is what it launches to. The
    // user can still rotate. You don't have to implement this method, in which
    // case it launches in the current orientation
    return UIInterfaceOrientationPortrait;
}

If you're targeting something older than iOS 6, you want the shouldAutorotateToInterfaceOrientation: method. By changing when it returns yes, you'll determine if it will rotate to said orientation. This will only allow the normal portrait orientation.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait); 
    
    // Use this to allow upside down as well
    //return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown);
}

Note that shouldAutorotateToInterfaceOrientation: has been deprecated in iOS 6.0.

How can I disable MobileSafari's content scaling on orientation change?

You will probably want to use the <meta name="viewport" .../> tag (see MDN docs and Safari Web Content Guide). The mobile Stack Exchange layout uses this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

Prevent display rotation on iPad

So in the info.plist for your app you just gotta go to "Supported interface orientation (iPad)" open that section up with the disclosure triangle and delete the items you don't want to rotate to for the iPad!

---

Related Topics