Phonegap 页面旋转错误，横向显示为纵向

Posted 2023-03-14

【中文标题】Phonegap 页面旋转错误，横向显示为纵向

【英文标题】：Phonegap page has wrong rotation, shows as portrait in landscape mode

【发布时间】：2012-06-12 12:29:14

【问题描述】：

我有一个（简单的）网页打包在 phonegap 应用程序中。如果我启动应用程序，它会以横向页面宽度显示纵向页面。所以文本从左下到左上开始。在右边我有一个页面应该结束的间隙。

这是我看到的：

在我的...-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>

在我的 iPad 上，我锁定了屏幕旋转。启动图像以横向显示正确。

该页面旨在适应具有固定尺寸的横向。这是我的视口：

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

并且页面具有正确的横向宽度，但它被翻转了。我可以上下滚动。应用启动后ipad状态栏从上往左跳。

更新

我将目标设备更改为仅 iPad 并允许方向为横向左，现在状态栏位于所需位置的顶部。页面仍在转动...我还尝试制作一个 simple page version 应该旋转也不起作用的东西。

更新 2

在Classes/MainViewController.m 我有：

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);

【问题讨论】：

当您将应用旋转为纵向然后再旋转为横向时会发生什么？

检查根控制器 - shouldAutorotateToInterfaceOrientation，如果它允许根视图旋转？

@Tom 就是这样！您可以将其发布为答案吗？所以我可以给你一些声誉。非常感谢！

【参考方案1】：

您可以检查根控制器 - shouldAutorotateToInterfaceOrientation，允许旋转特定方向。希望对您有所帮助。

例如return true 中的Classes/MainViewController.m：

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

    // Return YES for supported orientations
    //return (interfaceOrientation == UIInterfaceOrientationPortrait);
    return true;

【参考方案2】：

在Tom 对问题的回复之后，我想我会为那些使用旧版本的 XCode 和 ios 重建应用程序的人分享一个解决方案。我不记得我拥有的旧版本，但我现在使用的是 XCode 4.6.1，使用的是 iOS 6.1 的 Base SDK。我确定我之前使用的是 iOS 5.x 的 Base SDK。

我已将其替换为以下行：

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

...与下面的行，并纠正方向：

self.window.rootViewController = self.viewController;

【参考方案3】：

尝试使用元标记

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

更多信息请阅读this page

【讨论】：

我有一个带有width=device-width 的视口。我将其添加到我的问题中。