Як обмежити додаток до портретного режиму лише в іонному для всіх платформ?


121

Я працюю над Ionic / Cordova, я додав це, androidManifest.xmlале це не спрацювало для мене, і додаток все ще відображається обома способами

android:screenOrientation="portrait"

Як я можу обмежити додаток лише до портретного режиму? Я перевірив на android, і він не працює


це працює для іонної ??, тому що вона працює для іонної 2
manish kumar

Відповіді:


315

Якщо ви хочете обмежитися портретним режимом лише на всіх пристроях, вам слід додати цей рядок до config.xml у кореневій папці ваших проектів.

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

Після цього, будь ласка, відновіть платформу, ввівши нижче текст у командному рядку:

ionic build

2
приємно бачити. працював на мене. перевірено на android. дякую Вадієму
Мухаммед

1
як ви обмежите лише один конкретний екран?
user3607282

1
Я сам цього не перевіряв, але ви можете отримати бажаний результат у цьому підручнику: gajotres.net/…
Vadiem Janssens

4
Це, здається, працює лише тоді, коли ви запускаєте його на справжньому пристрої btw. Якщо запустити його через хмарний додаток Ionic View, це не вплине.
Джонкл

1
Гаразд для Іоніка 4.
П’єррік Мартельєр

36

Ionic v2 + оновлення

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

  1. Встановіть Ionic Native Plugin

    Встановіть модуль TypeScript Ionic Native для плагіна з CLI .

    $ 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" />здається, мені достатньо
заборонити

2
DevApp просто запускає ваш додаток у вигляді веб-перегляду в програмі DevApp, тому деякі натурні функції не працюють. Спробуйте компілювати та запускати додаток безпосередньо на пристрої, і воно має працювати.
Тайлер

13

Відповідно до https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences ,

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

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

Майте на увазі, що ці значення залежать від регістру, це "орієнтація", а не "орієнтація".


1
Коли ви прокручуєте вгору по наданому посиланням, він констатує наступне: "Тег <preference> встановлює різні параметри як пари атрибутів імені / значення. Ім'я кожної уподобання не залежно від регістру . [...]."
Вадіем Янссен

2
"орієнтація" працює на мене. "Орієнтація" дає мені білий екран під час роботи програми на фактичному пристрої.
CMA

2
"орієнтація" працює для мене з Ionic 2 в Android-пристрої.
kamayd

6

Якщо ви хочете зробити щось за своєю орієнтацією, це означає, що ви хочете виконати будь-які дії при зміні орієнтації на додаток, тоді вам доведеться використовувати плагін іонного фрейму ... https://ionicframework.com/docs/native/screen-orientation/

Якщо ви просто хочете обмежити свою програму в портретному або пейзажному режимі, вам потрібно просто додати наступний рядок у config.xml

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

4

По-перше, вам потрібно додати плагін для орієнтації екрана Cordova, використовуючи

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

Всередині кута app.jsдодайте лінію, screen.lockOrientation('portrait');як показано нижче:

ан

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

Ви можете спробувати це: -

Кордон для встановлення / блокування орієнтації екрана загальним способом для iOS, Android, WP8 та Blackberry 10. Цей плагін базується на ранній версії API орієнтації екрана, тому api наразі не відповідає поточній специфікації.

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

або спробуйте цей код у xml config: -

<preference name="orientation" value="portrait" />
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.