すべてのプラットフォームで、アプリをionicでのみ縦向きモードに制限するにはどうすればよいですか?


121

私はIonic / Cordovaに取り組んでandroidManifest.xmlいます。これを追加しましたが、これは私にとっては機能せず、アプリはまだ両方の方法で表示されています

android:screenOrientation="portrait"

アプリを縦向きモードのみに制限するにはどうすればよいですか?私はアンドロイドでチェックしましたが、うまくいきません


それはイオン性のために働いていますか??、cozはイオン性2のために働きます
マニッシュクマー

回答:


315

すべてのデバイスでのみ縦向きモードに制限する場合は、この行をプロジェクトのルートフォルダーのconfig.xmlに追加する必要があります。

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

その後、コマンドラインで以下のテキストを入力してプラットフォームを再構築してください:

ionic build

2
見て良い。私のために働いた。アンドロイドでチェック。Vadiemに感謝
Muhammad Faizan Khan、

1
特定の1つの画面だけをどのように制限しますか?
user3607282

1
私自身はこれをテストしていませんが、あなたは、このチュートリアルで望ましい結果を得ることができます:gajotres.net/...
Vadiemジャンサン

4
これは実際のデバイスで実行したときにのみ機能するようです。Ionic Viewクラウドアプリで実行しても効果はありません。
Johncl、2016

1
[OK]をイオン4の
PierrickMartellière

36

Ionic v2 +アップデート

Ionicバージョン2以降の場合、プラグインを含む、使用するすべてのプラグインに対応するIonic Nativeパッケージもインストールする必要がcordova-plugin-ありphonegap-plugin-ます。

  1. Ionic Native Pluginをインストールする

    CLIからプラグイン用のIonic NativeのTypeScriptモジュールをインストールします

    $ 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

プロバイダーのリストにScreenOrientationを追加してみてください
Tyler

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アプリ内でWebビューとしてアプリを実行しているだけなので、一部のネイティブ機能が機能しません。デバイスでアプリを直接コンパイルして実行してみてください。正しく動作するはずです。
タイラー

13

https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferencesによると、

方向を使用すると、方向をロックし、方向の変化に応じてインターフェイスが回転するのを防ぐことができます。可能な値はdefault、landscape、portraitです。例:

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

これらの値は大文字と小文字が区別されることに注意してください。これは「向き」ではなく「向き」です。


1
指定したリンクを上にスクロールすると、「<preference>タグはさまざまなオプションを名前/値属性のペアとして設定します。各設定の名前は大文字と小文字を区別しませ。[...]です。」
Vadiem Janssens

2
「オリエンテーション」は私のために働きます。実際のデバイスでアプリを実行すると、「オリエンテーション」で白い画面が表示されます。
CMA

2
「オリエンテーション」は、AndroidデバイスのIonic 2で動作します。
kamayd 2016年

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のアクティビティタグの属性としてファイルに追加android:screenOrientation="portrait"してくださいandroidManifest.xml

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


0

あなたはこれを試すことができます:-

iOS、Android、WP8、Blackberry 10の一般的な方法で画面の向きを設定/ロックするCordovaプラグイン。このプラグインは初期バージョンのScreen Orientation APIに基づいているため、現在のAPIは現在の仕様と一致しません。

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

またはXML構成でこのコードを試してください:

<preference name="orientation" value="portrait" />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.