Как ограничить приложение портретным режимом только в ionic для всех платформ?


121

Я работаю над Ionic / Cordova, я добавил это, androidManifest.xmlно у меня это не сработало, и приложение все еще отображается в обоих направлениях

android:screenOrientation="portrait"

Как я могу ограничить мое приложение только портретным режимом? Я проверил на андроиде не работает


он работает на ionic ??, потому что он работает на ionic 2
маниш кумар

Ответы:


315

Если вы хотите ограничиться портретным режимом только на всех устройствах, вам следует добавить эту строку в config.xml в корневой папке вашего проекта.

<preference name="orientation" value="portrait" />

После этого перестройте платформу, введя в командной строке следующий текст:

ionic build

2
приятно видеть. работал у меня. проверил на андроиде. спасибо Vadiem
Мухаммад Файзан Хан

1
как ограничить только один конкретный экран?
user3607282

1
Я сам не тестировал это, но вы можете получить желаемый результат с помощью этого урока: gajotres.net/…
Вадим Янссенс

4
Это работает только тогда, когда вы запускаете его на реальном устройстве, кстати. Если вы запустите его через облачное приложение Ionic View, это не даст никакого эффекта.
Johncl 01

1
Хорошо для Ionic 4.
Пьеррик Мартельер

36

Ionic v2 + Обновить

Для версий Ионных 2 и более поздних версий, вам необходимо будет также установить соответствующую Ионные Native пакет для любого плагина вы используете, в том числе cordova-plugin-и phonegap-plugin-плагин.

  1. Установите Ionic Native Plugin

    Установите модуль TypeScript Ionic Native для плагина из интерфейса командной строки .

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
    $ npm install --save @ionic-native/screen-orientation
    

    * Обратите внимание, что --saveкоманда является необязательной и может быть опущена, если вы не хотите добавлять плагин в свой package.jsonфайл.

  2. ScreenOrientationПлагин импорта

    Импортируйте плагин в свой controller, более подробная информация доступна в документации .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. Делай свое дело

    Программная блокировка и разблокировка ориентации экрана.

    // Set orientation to portrait
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    
    // Disable orientation lock
    this.screenOrientation.unlock();
    
  4. Бонусные очки

    Вы также можете получить текущую ориентацию.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    

1
ПРИМЕЧАНИЕ: вам понадобится «@ ionic-native / core»: «^ 3.6.1», потому что более низкая версия вызывает ошибку: forum.ionicframework.com/t/…
Luckylooke

Попробуйте добавить ScreenOrientation в список провайдеров
Тайлер,

3
ionic pluginбольше не работает. Думаю, сейчас ionic cordova plugin. Такие какionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33

2
добавление <preference name="Orientation" value="portrait" />кажется мне достаточно
tobbe

2
DevApp просто запускает ваше приложение как веб-представление в приложении DevApp, поэтому некоторые встроенные функции не работают. Попробуйте скомпилировать и запустить приложение прямо на устройстве, и оно должно работать.
Тайлер

13

Согласно https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences ,

Ориентация позволяет заблокировать ориентацию и предотвратить поворот интерфейса в ответ на изменение ориентации. Возможные значения: по умолчанию, альбомная или книжная. Пример:

<preference name="Orientation" value="landscape" />

Имейте в виду, что эти значения чувствительны к регистру, это «Ориентация», а не «ориентация».


1
Когда вы прокручиваете предоставленную ссылку вверх, в ней говорится следующее: «Тег <preference> устанавливает различные параметры в виде пар атрибутов имя / значение. В имени каждого предпочтения регистр не учитывается . [...].
Vadiem Janssens

2
"ориентация" у меня работает. «Ориентация» дает мне белый экран при запуске приложения на реальном устройстве.
CMA

2
"Ориентация" у меня работает с Ionic 2 в устройстве Android.
kamayd 05

6

Если вы хотите что-то сделать в соответствии с вашей ориентацией, это означает, что вы хотите выполнить какое-либо действие при изменении ориентации приложения, тогда вам нужно использовать плагин ionic framework ... https://ionicframework.com/docs/native/screen-orientation/

Если вы просто хотите ограничить свое приложение портретным или альбомным режимом, вам нужно просто добавить следующую строку в свой config.xml

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />

4

Во-первых, вам нужно добавить плагин Cordova Screen Orientation, используя

cordova plugin add cordova-plugin-screen-orientation

а затем добавьте screen.lockOrientation('portrait');в .run()метод

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})

2

Внутри вашего angular app.jsдобавьте строку, screen.lockOrientation('portrait');как показано ниже:

an

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

У вас также будет другой код в .runфункции, но тот, который вас интересует, - это написанная мной строка. Я не добавил строку <preference name="orientation" value="portrait" />в свой код, но вам может потребоваться добавитьcordova-plugin-device-orientation


2

Пожалуйста, добавьте android:screenOrientation="portrait"в androidManifest.xmlфайл как атрибут тега активности для android.

<activity
        android:name="com.example.demo_spinner.MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait" >
</activity>


0

Вы можете попробовать это: -

Плагин Cordova для установки / блокировки ориентации экрана обычным способом для iOS, Android, WP8 и Blackberry 10. Этот плагин основан на ранней версии Screen Orientation API, поэтому api в настоящее время не соответствует текущей спецификации.

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

или попробуйте этот код в конфигурации xml: -

<preference name="orientation" value="portrait" />
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.