Cordova iOS Изменить ориентацию экрана на альбомную на одной странице

Однако я не мог найти никаких решений. 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, затем выберите класс target-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», найдите ниже и измените возврат, по умолчанию это будет «ДА», измените его на «НЕТ».

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 (< a href="https://github.com/apache/cordova-plugin-screen-orientation" rel="nofollow noreferrer">cordova-plugin-screen-orientation), для этого есть точка сбоя (которая на данный момент не кажется исправимой ). Это, вероятно, путь, чтобы идти в долгосрочной перспективе.

Установите плагин, а затем используйте этот JS:

screen.orientation.lock('landscape');

Or....

Только CSS

Вы можете использовать CSS, чтобы исправить это, если вы объедините его с медиа-запросами, но у него тоже есть большая загвоздка. Это не повлияет на то, где открываются клавиатуры, а открытие клавиатур может привести к изменению медиа-запроса:

Открытие программной клавиатуры на многих устройствах в портретной ориентации приведет к тому, что окно просмотра станет шире, чем в высоту, что заставит браузер использовать альбомный стиль вместо портретного. [документы MDN]

Если это не имеет значения для вашей страницы, вы можете просто добавить что-то вроде класса с именем 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>