如何在所有平台上仅将应用程序限制为仅纵向模式?


121

我正在研究Ionic / Cordova,我对此进行了添加,androidManifest.xml但这对我不起作用,并且应用程序仍在以两种方式显示

android:screenOrientation="portrait"

如何将我的应用程序仅限制为纵向模式?我已经在android上检查了,但不起作用


它适用于离子吗??,因为其适用于离子2
manish kumar

Answers:


315

如果只想在所有设备上使用纵向模式,则应将此行添加到项目根文件夹中的config.xml中。

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

之后,请通过在命令行中键入以下文本来重建平台:

ionic build

2
很高兴看到。为我工作。在android上检查。感谢Vadiem
穆罕默德·法赞汗

1
如何只限制一个特定屏幕?
user3607282 '16

1
:我没有这个测试自己,但你可能会与本教程所期望的结果gajotres.net/...
Vadiem詹森

4
仅当您在真实设备上运行它时,这似乎才起作用。如果通过Ionic View云应用程序运行它,则没有任何效果。
Johncl '16

1
好了离子4
皮埃里克Martellière

36

Ionic v2 +更新

对于Ionic 2和更高版本,您还需要为使用的任何插件安装相应的Ionic Native软件包,包括cordova-plugin-phonegap-plugin-插件)。

  1. 安装Ionic本机插件

    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/…–
Luckylooke

尝试添加ScreenOrientation到供应商的名单
泰勒

3
ionic plugin似乎不再起作用。我认为是现在ionic cordova plugin。例如ionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33 '17

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

方向允许您锁定方向并防止界面响应方向变化而旋转。可能的值为默认,横向或纵向。例:

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

请注意,这些值区分大小写,是“方向”,而不是“方向”。


1
当您向上滚动所提供的链接时,它显示以下内容:“ <preference>标记将各种选项设置为成对的名称/值属性。每个首选项的名称都不区分大小写。[...]”。
Vadiem Janssens

2
“方向”对我有用。在实际设备上运行应用程序时,“方向”会给我白屏。
CMA

2
“方向”适用于Android设备中的Ionic 2。
kamayd '16


4

首先,你需要添加科尔多瓦屏幕方向插件使用

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

您可以尝试:

Cordova插件以iOS,Android,WP8和Blackberry 10的通用方式设置/锁定屏幕方向。此插件基于Screen Orientation API的早期版本,因此该api当前与当前规范不匹配。

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

或在xml配置中尝试以下代码:-

<preference name="orientation" value="portrait" />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.