繁体   English   中英

Cordova iOS 在单页上将屏幕方向更改为横向

[英]Cordova iOS Change Screen Orientation To Landscape on a Single Page

我有一个用 Cordova 3+ 为 iPhone 开发的应用程序。 目前该应用程序运行良好。 我还限制了当前应用程序的横向视图,即应用程序仅以纵向显示。

应用程序由很多描述和一个报告页面组成。 我想要的是以纵向显示所有页面并以横向显示报告页面。

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

有没有人对此有任何建议或解决方案?

提前致谢!

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

编辑:在 iPhone 中为cordova 3+ 以编程方式控制屏幕方向

但是我找不到任何解决方案。 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 <3.0),

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

在Cordova项目>插件上右键单击并选择新文件,然后从iOS选择Cocoa touch然后选择objective-C Class并单击下一步,在类名称中插入“ScreenOrientation”并在“CDVPlugin”的子类中单击“下一步”,然后单击“创建”。

在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项目中单击搜索并搜索“shouldAutoRotate并找到以下内容并更改返回,默认情况下将为'YES'将其更改为'NO'。

CDVViewController.m

- (BOOL)shouldAutorotate
{
    return NO;
}

在项目设置中,在设备方向中检查所有选项(尽管不重要),

Project Settings > Device orientation > Tick all 4 options.

并从你的项目中调用它,

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

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

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

Android旋转有视觉故障,由于性能(你的里程可能会有所不同取决于DOM大小),但在轮换iOS是完美的。

官方Cordova插件

根据这个问题 ,即使是官方的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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM