Question

我有一款适用于iPhone的Cordova 3+开发的应用。目前应用程序运行正常。我还限制了当前应用程序的横向视图，即应用程序仅以纵向显示。

应用程序包含大量描述和报告页面。我想要的是以纵向显示所有页面并在横向显示报告页面。

我使用Backbone.js + underscore.js框架。

有人对此有任何建议或解决方案吗？

提前致谢！

编辑：我想要的是强制该特定报告页面在横向视图中显示。并以纵向显示所有其他页面。

编辑：以编程方式控制iPhone中的屏幕方向以获取cordova 3 +

Answer 1

然而，我无法找到任何解决方案。 Atlast我使用CSS实现了它。

-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Chrome, Safari, Opera */
transform:rotate(-90deg); /* Standard syntax */

无论如何，它不是一个完美的解决方案，但它有效。

您可以使用本机代码以编程方式将单个页面更改为横向，并使用javascript调用它。

创建一个新的js文件作为ScreenOrientation.js并插入以下代码

var ScreenOrientation = {
   //alert(orientation);
callScreenOrientationNative: function(success,fail,orientation) {
   return Cordova.exec( success, fail,
                       "ScreenOrientation",
                       "screenorientationFunction",
                       [orientation]);
}
};

并在index.html中添加上述文件，如下所示，

<script type="text/javascript" src="ScreenOrientation.js"></script>

在任何添加的js文件中添加以下函数（在我的项目中，我添加了一个script.js文件来添加常用函数），

function callScreenOrientation(orientation) {
   ScreenOrientation.callScreenOrientationNative(nativePluginResultHandler,nativePluginErrorHandler,orientation);
}

function nativePluginResultHandler (result) {
}

function nativePluginErrorHandler (error) {
}

在config.xml中添加以下功能名称

<!-- Screen Orientation custom plugin to display reports page. -->
   <feature name="ScreenOrientation">
       <param name="ios-package" value="ScreenOrientation"/>
   </feature>

在插件下添加（对于cordova＆lt; 3.0），

<plugins>
    <plugin name="ScreenOrientation" value="ScreenOrientation" />
</plugins>

在Cordova项目上＆gt;插件右键单击并选择新文件，然后从iOS选择Cocoa touch然后选择objective-C Class并单击next，在类名称insert＆＃34; ScreenOrientation＆＃34;在＆＃34; CDVPlugin＆＃34;的子类中然后单击“下一步”并单击“创建”。

在ScreenOrientation.h中输入以下内容，

#import <Cordova/CDV.h>

@interface ScreenOrientation : CDVPlugin

- (void) screenorientationFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

在ScreenOrientation.m中输入以下内容，

#import "ScreenOrientation.h"

@implementation ScreenOrientation

- (void) screenorientationFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options {
   [arguments pop];

   NSString *orientation = [arguments objectAtIndex:0];

   if ( [orientation isEqualToString:@"LandscapeLeft"] ) {
       NSLog(@"Landscape Left");
        [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationLandscapeLeft];
   }
   else if ( [orientation isEqualToString:@"LandscapeRight"] ) {
       NSLog(@"Landscape Right");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationLandscapeRight];
   }
   else if ( [orientation isEqualToString:@"Portrait"] ) {
       NSLog(@"Portrait");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationPortrait];
   }
   else if ( [orientation isEqualToString:@"PortraitUpsideDown"] ) {
       NSLog(@"Portrait upSide Down Left");
       [[UIApplication sharedApplication] setStatusBarOrientation: UIInterfaceOrientationPortraitUpsideDown];
   }
}

@end

在Cordova项目中点击搜索并搜索＆＃34; shouldAutoRotate并找到以下内容并更改返回，默认情况下它将是＆＃39; YES＆＃39;将其更改为“否”＆＃39;

<强> CDVViewController.m

- (BOOL)shouldAutorotate
{
    return NO;
}

在项目设置中，在设备方向中检查所有选项（尽管不重要），

Project Settings > Device orientation > Tick all 4 options.

并从您的项目中调用它，

callScreenOrientation('LandscapeLeft');
callScreenOrientation('LandscapeRight');
callScreenOrientation('Portrait');
callScreenOrientation('PortraitUpsideDown');

Answer 2

在此链接中查看方向插件。

http://www.web-garden.co.uk/blog/2012/7/29/how-to-control-the-page-orientations-in-your-ios-phonegap-application-part-2

Answer 3

此插件允许您以编程方式在iOS和Android上旋转屏幕。

https://github.com/kant2002/cordova-plugin-screen-orientation

由于性能的原因（你的里程数可能因DOM大小而异），Android旋转会出现视觉故障，但在轮换iOS上是完美的。

Answer 4

科尔多瓦官方插件

根据this issue，即使是官方的Cordova插件（cordova-plugin-screen-orientation）也会出现故障点（目前看来无法修复）。不过，这可能是长期的途径。

安装插件，然后使用此JS：

screen.orientation.lock('landscape');

或者....

仅CSS

如果将它与媒体查询结合使用，则可以使用CSS来解决此问题，但是它也有很大的障碍。它不会影响打开键盘的位置，并且打开键盘可能会使媒体查询发生变化：

在许多设备上以纵向方向打开软键盘会导致视口变得比高度高，从而导致浏览器使用横向样式而不是纵向样式。 [MDN docs]

如果这对您的页面而言并不重要，则可以简单地添加一个名为orientation-landscape的类（如果无法对它进行硬编码，则可以插入JS），然后在媒体查询说它是纵向时旋转它

@media (orientation: portrait) {
  .orientation-landscape {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@media (orientation: landscape) {
  .orientation-portrait {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}


/* just to show the change */

.orientation-landscape {
  background: blue;
  color: white;
  padding: 1em;
  text-align: center;
}

.orientation-portrait {
  border: 1px solid green;
  color: green;
  padding: 1em;
  background: lightgrey;
  text-align: center;
}

<div class="orientation-portrait">
  heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo
</div>

<div class="orientation-landscape">
  heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo heyo
</div>

Cordova iOS更改屏幕方向在单个页面上进行横向显示

4 个答案:

科尔多瓦官方插件

仅CSS