Ionic 5：为基于Capacitor的Android/iOS应用锁定屏幕方向

你提到的用@ionic-native/screen-orientation的方式其实是可行的，但因为这个插件基于Cordova，在Capacitor环境下更推荐使用Capacitor官方的Screen Orientation API，同时配合原生项目的配置，能更彻底地实现全局竖屏锁定，避免启动瞬间的横屏闪烁或者其他场景下的方向变化。

下面分两种方案详细说明，建议结合使用：

方案一：使用Capacitor官方Screen Orientation API（代码层面锁定） #

这个API是Capacitor原生支持的，不需要依赖Cordova插件，更适配Capacitor环境：

1. 首先安装官方包：

npm install @capacitor/screen-orientation

2. 修改你的app.component.ts，替换原来的代码：

import { Component } from '@angular/core';
import { ScreenOrientation } from '@capacitor/screen-orientation';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    // 初始化时调用锁定方法
    this.lockToPortrait();
  }

  async lockToPortrait() {
    try {
      // 锁定为竖屏
      await ScreenOrientation.lock({ type: 'portrait' });
      console.log('屏幕方向已成功锁定为竖屏');
    } catch (error) {
      console.error('锁定屏幕方向失败:', error);
    }
  }
}

这里用async/await处理异步操作，比同步调用更稳妥，能捕获可能的错误（比如某些设备不支持锁定方向的情况）。

方案二：原生项目配置（彻底强制竖屏） #

代码层面的锁定可能在应用启动瞬间有短暂的横屏闪屏，所以配合原生项目的配置能从根源上解决问题：

Android端配置 #

1. 打开Android项目：

npx cap open android

2. 找到app/src/main/AndroidManifest.xml文件，在所有<activity>标签中添加android:screenOrientation="portrait"，比如主Activity：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@style/AppTheme.NoActionBarLaunch"
    android:screenOrientation="portrait">

这个配置会强制所有页面都以竖屏模式启动。

iOS端配置 #

1. 打开iOS项目：

npx cap open ios

2. 在Xcode中选择你的项目目标，进入General标签页
3. 在Deployment Info区域，取消勾选Landscape Left和Landscape Right，只保留Portrait (bottom home button)

关于你当前代码的说明 #

你现在用的@ionic-native/screen-orientation在Capacitor中也能工作，但需要额外安装对应的Cordova插件和Capacitor兼容层，步骤更繁琐：

npm install cordova-plugin-screen-orientation
npm install @ionic-native/screen-orientation
ionic cap sync

而且相比Capacitor官方API，它不是原生适配的，所以更推荐替换成官方方案。

总结 #

结合原生项目配置+Capacitor官方API，既能保证应用启动时直接以竖屏加载，又能在运行过程中维持竖屏锁定，完全满足你全局竖屏的需求。

内容的提问来源于stack exchange，提问作者Donny groezinger