[英]Enforce right orientation landscape mode for Phonegap/Cordova iOS app
[英]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-plugin-screen-orientation
)也有一个失败点(目前似乎无法修复)。 不过,这可能是长期走的路。
安装插件然后使用这个JS:
screen.orientation.lock('landscape');
要么....
如果将它与媒体查询结合使用,可以使用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.