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

Posted 2023-03-14

【中文标题】Cordova iOS 在单页上将屏幕方向更改为横向

【英文标题】：Cordova iOS Change Screen Orientation To Landscape on a Single Page

【发布时间】：2014-04-25 06:56:19

【问题描述】：

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

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

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

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

提前致谢！

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

编辑：在 iPhone 中以编程方式控制 Cordova 3+ 的屏幕方向

【参考方案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

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

在 Cordova 项目上 > 插件右键单击并选择新文件，然后从 iOS 中选择 Cocoa touch，然后选择 Objective-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'。

CDVViewController.m

- (BOOL)shouldAutorotate

    return NO;

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

Project Settings > Device orientation > Tick all 4 options.

并像这样从您的项目中调用它，

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

【讨论】：

谢谢！这是一个很大的帮助。我知道这篇文章很旧，但我猜我遇到了一些问题，因为它是 xcode/ios 等的较新版本。我遇到的问题是代码在旋转屏幕后工作正常对 obj-c 代码的语法更新很少，但我现在遇到了一个问题，如果在执行代码时将 shouldAutorotate 设置为 NO，它将不再起作用。把它放回是，它工作正常，但现在用户可以完全控制它何时旋转，这不是我想要的。你知道解决方法吗？

【参考方案2】：

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

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

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

【参考方案3】：

Cordova 官方插件

根据this issue，即使是官方的 Cordova 插件 (cordova-plugin-screen-orientation) 也有一个失败点（目前似乎无法修复）。不过，这可能是长期的路线。

安装插件然后使用这个JS：

screen.orientation.lock('landscape');

或者....

仅 CSS

如果您将 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>