如何仅在所有平台的离子中将应用程序限制为纵向模式？

Posted 2023-03-16

【中文标题】如何仅在所有平台的离子中将应用程序限制为纵向模式？

【英文标题】：How to restrict app to portrait mode only in ionic for all platforms?

【发布时间】：2015-03-01 13:19:29

【问题描述】：

我正在开发 Ionic/Cordova，我将此添加到 androidManifest.xml 但这对我不起作用，并且应用程序仍然以两种方式显示

android:screenOrientation="portrait"

如何将我的应用程序限制为仅纵向模式？我在android上检查过，它不起作用

【问题讨论】：

它是否适用于 ionic ??，因为它适用于 ionic 2

【参考方案1】：

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

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

之后，请通过在命令行中输入以下文本来重建平台：

ionic build

【讨论】：

很高兴看到。为我工作。在安卓上检查。谢谢瓦迪姆

如何只限制一个特定的屏幕？

我自己没有测试过，但是通过本教程你可能会得到想要的结果：gajotres.net/…

这似乎只在您在真实设备上运行时才有效。如果您通过 Ionic View 云应用程序运行它，则没有效果。

适用于 Ionic 4。

【参考方案2】：

Ionic v2+ 更新

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

安装离子原生插件

从CLI 为插件安装 Ionic Native 的 TypeScript 模块。

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

* 请注意，--save 命令是可选的，如果您不希望将插件添加到您的 package.json 文件中，可以将其省略

导入ScreenOrientation插件

将插件导入您的controller，更多详细信息请参见documentation。

import  ScreenOrientation  from '@ionic-native/screen-orientation';

@Component(
    templateUrl: 'app.html',
    providers: [
        ScreenOrientation
    ]
)

constructor(private screenOrientation: ScreenOrientation) 
  // Your code here...

做你的事

以编程方式锁定和解锁屏幕方向。

// Set orientation to portrait
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);

// Disable orientation lock
this.screenOrientation.unlock();

奖励积分

您还可以获取当前方向。

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

【讨论】：

注意：你需要 "@ionic-native/core": "^3.6.1"，因为低版本会导致错误：forum.ionicframework.com/t/…

尝试将 ScreenOrientation 添加到提供者列表中

ionic plugin 似乎不再起作用。我想现在是ionic cordova plugin。如ionic cordova plugin add --save cordova-plugin-screen-orientation

添加<preference name="Orientation" value="portrait" /> 对我来说似乎已经足够了

DevApp 只是在 DevApp 应用程序中将您的应用程序作为 web 视图运行，因此某些本机功能不起作用。尝试直接在设备上编译和运行您的应用程序，它应该可以工作。

【参考方案3】：

根据https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences，

Orientation 允许您锁定方向并防止界面响应方向变化而旋转。可能的值是默认、横向或纵向。示例：

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

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

【讨论】：

当您向上滚动您提供的链接时，它会显示以下内容：“ 标签将各种选项设置为名称/值属性对。每个首选项的名称不区分大小写。[...]。”

"orientation" 对我有用。在实际设备上运行应用程序时，“方向”给了我白屏。

“orientation”适用于我在 Android 设备中使用 Ionic 2。

【参考方案4】：

如果你想在你的方向上做某事意味着你想在改变你的应用方向时执行任何操作，那么你必须使用离子框架插件...... https://ionicframework.com/docs/native/screen-orientation/

如果您只想将应用限制为纵向或横向模式，那么您只需在 config.xml 中添加以下行

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

【参考方案5】：

首先，您需要添加 Cordova Screen Orientation Plugin 使用

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);

);
)

【参考方案6】：

请在androidManifest.xml 文件中添加android:screenOrientation="portrait" 作为android 活动标签的属性。

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

【参考方案7】：

在你的角度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

【参考方案8】：

在 config.xml 中添加以下行

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

【参考方案9】：

你可以试试这个：-

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

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

或在 xml 配置中尝试此代码：-

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