Cordova iOS 在單頁上將屏幕方向更改為橫向

Question

我有一個用 Cordova 3+ 為 iPhone 開發的應用程序。 目前該應用程序運行良好。 我還限制了當前應用程序的橫向視圖，即應用程序僅以縱向顯示。

應用程序由很多描述和一個報告頁面組成。 我想要的是以縱向顯示所有頁面並以橫向顯示報告頁面。

我正在使用 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 <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');

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

Android旋轉有視覺故障，由於性能（你的里程可能會有所不同取決於DOM大小），但在輪換iOS是完美的。

Answer 4

官方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>