Screen Orientation
在您的 Capacitor 应用中设置屏幕方向
许多应用在设备的纵向和横向方向上都表现良好。然而,也有不少应用并非如此,并且有充分的理由要求应用仅在某些情况下或完全以某种特定模式运行。
全局方向设置
要为您的 Capacitor 应用设置全局方向配置,您需要根据目标平台设置相应的配置值。
iOS 配置
iOS 允许为 iPhone 和 iPad 设置不同的屏幕方向支持。要限制 iOS 允许的方向,请打开 Xcode 并编辑 Info.plist 文件。找到以下键:Supported interface orientation 和 Supported interface orientation (iPad)。使用这些值,为 iPhone 和 iPad 分别指定您希望支持的不同方向。
如果直接编辑 Info.plist 文件,请查找以下键:UISupportedInterfaceOrientations 和 UISupportedInterfaceOrientations~ipad。例如,以下设置会将 iPhone 的方向限制为正向的 Portrait 模式,而 iPad 则允许两种 Landscape 方向:
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationLandscapeRight</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
</array>
Android 配置
在 Android 上,可以通过修改 AndroidManifest.xml 文件,在主应用的 <activity> 条目中设置 android:screenOrientation 来配置方向。有关可能的取值,请参阅 Android 清单文档。
动态方向设置
许多应用需要支持多个方向,同时能够根据内容需求临时锁定方向。
Capacitor 通过 @capacitor/screen-orientation 插件支持此功能:
npm install @capacitor/screen-orientation
npx cap sync
然后,使用 lock 和 unlock 方法:
import { ScreenOrientation } from '@capacitor/screen-orientation';
...
await ScreenOrientation.lock({ orientation: 'portrait' });
await ScreenOrientation.lock({ orientation: 'landscape' });
// 解锁方向,将恢复为全局设置:
await ScreenOrientation.unlock();
有关所有可能的方向值和配置选项,请参阅 方向插件文档。