Phonegap page has wrong rotation, shows as portrait in landscape mode

问题

I have a (simple) web page packed in a phonegap app. If I start the app it shows the page in portrait direction with landscape page width. So the text starts left bottom to left top. On the right I have a gap where the page should end.

This is what I see:

Supported orientations are landscape left and right in my ...-Info.plist:

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationLandscapeRight</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
</array>

On my iPad I locked the screen rotate. The launch image shows up correct in landscape.

The page is designed to fit into landscape with fixed sizes. This is my viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

and the page has the correct width for landscape but it is turned around. I can scroll up and down. The ipad status bar jumps from the top to the left after app start.

UPDATE

I change target device to iPad only and allowed orientation to Landscape Left only now the status bar is on the top where it needs to be. Page is still turned... I also tried to make a simple page version that should rotate what did not work either.

Update 2

In Classes/MainViewController.m I have:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

回答1:

You can check the root Controller - shouldAutorotateToInterfaceOrientation, allow rotation for certain orientation. Hope it helps.

For example return true in Classes/MainViewController.m:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    //return (interfaceOrientation == UIInterfaceOrientationPortrait);
    return true;
}

回答2:

Following Tom's reply to the question, I thought I'd share a solution for those rebuilding an app with an older version of XCode and iOS. I don't recall the older versions I had, but I am now on XCode 4.6.1 using a Base SDK of iOS 6.1. I'm sure I was using a Base SDK of iOS 5.x previously.

I have replaced it with the following line:

[self.window addSubview:self.viewController.view];

...with the line below, and the orientation is corrected:

self.window.rootViewController = self.viewController;

回答3:

Try to use meta tag

<meta name="viewport" content="width=720,maximum-scale=1.0" />

and for more read this page

来源：https://stackoverflow.com/questions/10996676/phonegap-page-has-wrong-rotation-shows-as-portrait-in-landscape-mode

标签

html

ipad

cordova

screen-orientation