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

sq1bmfud  于 2022-11-10  发布在  iOS
关注(0)|答案(3)|浏览(435)

我有一个应用程序开发在 cordova 3+为iPhone。目前应用程序运行良好。我还限制了当前应用程序的风景视图,即应用程序显示只在肖像。
应用程序由大量的描述和一个报告页面组成。我想要的是以纵向显示所有页面,以横向显示报告页面。
我正在使用Backbone.js + underscore.js框架。
有人对此有什么建议或解决办法吗?
提前感谢!

编辑:我想要强制该特定报告页面以横向视图显示,而以纵向视图显示所有其他页面。
编辑:在cordova 3+的iPhone中可编程控制屏幕方向

4xrmg8kj

4xrmg8kj1#

但是我找不到任何解决方案。最后我用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选择可可touch,然后选择目标C类并单击下一步,在类名中插入“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'。

CDV视图控制器.m

- (BOOL)shouldAutorotate
{
    return NO;
}

在项目设置中,在设备方向中选中所有选项(虽然不重要),

Project Settings > Device orientation > Tick all 4 options.

并从您的项目中调用它,

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

ruyhziif2#

此插件允许您在iOS和Android上以编程方式旋转屏幕。
https://github.com/kant2002/cordova-plugin-screen-orientation
Android旋转有视觉故障,由于性能(你的里程可能会因DOM大小而异),但在旋转iOS是完美的。

xxhby3vn

xxhby3vn3#

Cordova官方插件

根据this issue的说法,即使是官方的 cordova 插件(cordova-plugin-screen-orientation)也有一个失败点(目前似乎还不能修复)。
安装插件,然后使用此JS:

screen.orientation.lock('landscape');

或者......

仅CSS

如果你把CSS和媒体查询合并起来,你可以用它来解决这个问题,但是它也有一个很大的障碍。它不会影响键盘打开的位置,而键盘打开可能会使媒体查询发生变化:
在许多设备上以纵向模式打开软键盘会导致视窗的宽度大于高度,从而导致浏览器使用横向样式而不是纵向样式。[ MDN docs ]
如果这对您的页面来说不重要,您可以简单地添加一个名为orientation-landscape的类(或者如果您不能硬编码它,则使用JS插入),然后在媒体查询显示它是纵向时旋转它。
第一个

相关问题