@capawesome/capacitor-screen-orientation

中文文档
8.0.4发布于 2026/10/21MITTypeScriptESM + CJS零依赖构建来源已验证近 30 天下载 9.5万

控制器插件可以锁定/解锁Android,iOS,和Web上的屏幕取向.

中文使用文档
文档目录32 节
  1. 特征
  2. 使用大小写
  3. 兼容性
  4. 演示
  5. 安装
  6. iOS系统
  7. 配置
  8. 使用量
  9. 锁定屏幕方向
  10. 解锁屏幕方向
  11. 获取当前屏幕方向
  12. API 密码
  13. 锁定(...)
  14. 解锁( )
  15. 获取当前方向( C)
  16. 添加倾听器( “ 屏幕方向变化 ” ,...)
  17. 删除所有收听器( )
  18. 接口
  19. 类型异名
  20. 数字
  21. 财务问题
  22. 为什么方向锁在iPad上不起作用?
  23. 我需要在iOS上修改我的AppDelegate吗?
  24. LandSCAPE和LandSCAPE PRIMARI有什么区别?
  25. 锁定方向后如何恢复自动旋转??
  26. 我对方向变化有什么反应?
  27. 我能用这个插件吗? 有Ionic、React、Vue或Angular?
  28. 相关插件
  29. 通讯
  30. 更改日志
  31. 许可证
  32. 贷项

电容屏幕方向插件

锁定/解锁屏幕方向的电容插件 .

特征

Capacitor Screen取向插件是Capacitor应用最完整的取向控制解决方案之一. 以下是一些关键特征:

  • 🖥️ 跨平台:支持Android,iOS,和Web.
  • 🔒 方向锁定:将屏幕锁定到特定方向.
  • 🔓 方向解锁:解锁并恢复自动取向.
  • 📱 多重取向:支持肖像,地貌,以及特定取向.
  • 🔄 定向检测: 获取当前屏幕方向.
  • 📢 活动听众: 听取取向变化事件.
  • 📐 精细的控制:初级和二级定向模式.
  • 🍎 iPad 支持:iPad方向锁定的特殊配置.
  • 🤝 兼容性: 与 家庭指标, (中文(简体) ), 保持清醒 财务报告和审定财务报表 导航栏 插件 .
  • 🔁 最新数据:总是支持最新的Capacitor版本.

缺少一个功能? 刚刚 打开一个问题 我们看看!

使用大小写

屏幕定向插件通常用于应用程序的某些屏幕只在特定方向上运行良好时,例如:

  • 视频播放器: 将屏幕锁定到地平面上进行全屏视频回放.
  • 游戏:无论设备如何持有,游戏都保持固定方向.
  • 相机和扫描屏:在捕捉相片或扫描代码时将屏幕锁定为肖像.
  • 格式和阅读视图:在用户输入或读取时防止意外旋转.
  • 响应布局: 对方向变化的反应 screenOrientationChange 事件以调整您的用户界面.

兼容性

插件版本电容版本状态
8.x.x (英语)>=8.x.x积极支持
7.x.x (中文(简体) )7.x.x (中文(简体) )折旧
6.x.x (中文(简体) )6.x.x (中文(简体) )折旧
5.x.x (中文(简体) )5.x.x (中文(简体) )折旧

演示

这里有一个实例: robingenz/电容器-插管-demo

安装

你可以用我们的 AI 辅助设置 以安装插件. 添加数据 超级技能 至您的 AI 工具,使用以下命令:

npx skills add capawesome-team/skills --skill capacitor-plugins

然后使用下列提示:

 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-screen-orientation` plugin in my project.

如果你喜欢 手动设置,通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capawesome/capacitor-screen-orientation
npx cap sync

iOS系统

常规

在iOS上,您必须在您的应用程序中添加以下内容: AppDelegate.swift数字 :

+ import ScreenOrientationPlugin

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

+ func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
+   return ScreenOrientation.getSupportedInterfaceOrientations()
+ }

如果您的工程仍然使用CocoaPods而不是 Swift 软件包管理器( SPM) , 导入 CapawesomeCapacitorScreenOrientation 而不是说 ScreenOrientationPlugin数字 :

+ import CapawesomeCapacitorScreenOrientation

iPad 方向锁定

在iPad上,您必须在应用程序中添加以下内容: Info.plist数字 :

<key>UIRequiresFullScreen</key>
<true/>

配置

此插件不需要配置 .

使用量

以下例子显示如何锁定,解锁,并读取当前屏幕取向.

锁定屏幕方向

将设备锁定到特定的方向, 例如地貌 。 再说 LANDSCAPE 财务报告和审定财务报表 PORTRAIT,也可以锁定初级或二级模式,例如 LANDSCAPE_PRIMARY 用于精细控制:

import { ScreenOrientation, OrientationType } from '@capawesome/capacitor-screen-orientation';

const lock = async () => {
  await ScreenOrientation.lock({ type: OrientationType.LANDSCAPE });
};

解锁屏幕方向

删除方向锁并恢复自动旋转 :

import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';

const unlock = async () => {
  await ScreenOrientation.unlock();
};

获取当前屏幕方向

读取设备当前方向类型 :

import { ScreenOrientation } from '@capawesome/capacitor-screen-orientation';

const getCurrentOrientation = async () => {
  const result = await ScreenOrientation.getCurrentOrientation();
  return result.type;
};

API 密码

锁定(...)

lock(options?: LockOptions | undefined) => Promise<void>

锁定设备方向 .

参数类型
optionsLockOptions

解锁( )

unlock() => Promise<void>

解锁设备取向.


获取当前方向( C)

getCurrentOrientation() => Promise<GetCurrentOrientationResult>

获得当前设备方向类型.

回返情况: Promise<GetCurrentOrientationResult>


添加倾听器( “ 屏幕方向变化 ” ,...)

addListener(eventName: 'screenOrientationChange', listenerFunc: ScreenOrientationChangeListener) => Promise<PluginListenerHandle>

听取屏幕方向变化.

参数类型
eventName'screenOrientationChange'
listenerFuncScreenOrientationChangeListener

回返情况: Promise<PluginListenerHandle>


删除所有收听器( )

removeAllListeners() => Promise<void>

删除此插件的所有听众 .


接口

锁定选项

Prop类型说明
typeOrientationType取向锁型.

获取当前定向结果

Prop类型说明
typeOrientationType当前取向类型.

插件听筒

Prop类型
remove() => Promise<void>

屏幕定向变化

Prop类型说明
typeOrientationType当前取向类型.

类型异名

屏幕定向变换倾听器

回调收到屏幕方向更改通知 .

(change: ScreenOrientationChange): void

数字

方向类型

成员数值说明
LANDSCAPE'landscape'其取向要么是景观第一,要么是景观第二.
LANDSCAPE_PRIMARY'landscape-primary'取向为主地貌模式.
LANDSCAPE_SECONDARY'landscape-secondary'取向为二级地貌模式.
PORTRAIT'portrait'方向要么是肖像初级,要么是肖像二级.
PORTRAIT_PRIMARY'portrait-primary'取向为主肖像模式.
PORTRAIT_SECONDARY'portrait-secondary'取向为二级肖像模式.

财务问题

为什么方向锁在iPad上不起作用?

要在 iPad 上工作,必须添加 UIRequiresFullScreen 键与值 true 你的应用程序 Info.plist 文件,如 安装 节。 同时要确保您已经对您的 AppDelegate.swift。 。 。 .

我需要在iOS上修改我的AppDelegate吗?

对 您必须执行 supportedInterfaceOrientationsFor 应用中的方法 AppDelegate.swift 返回时 ScreenOrientation.getSupportedInterfaceOrientations(),如 安装 节。 没有这种改变,方向锁对iOS没有影响.

LandSCAPE和LandSCAPE PRIMARI有什么区别?

这个 LANDSCAPE 类型覆盖两种地平面模式,因此设备在锁定时可以在地平面主和地平面次要之间旋转. 这个 LANDSCAPE_PRIMARY 财务报告和审定财务报表 LANDSCAPE_SECONDARY 类型将屏幕锁定在两个景观模式中。 这同样适用于 PORTRAIT, (中文(简体) ), PORTRAIT_PRIMARY 财务报告和审定财务报表 PORTRAIT_SECONDARY。 。 。 .

锁定方向后如何恢复自动旋转??

随便叫它 unlock() 方法。 它会去除取向锁,这样设备就可以根据用户的设备设置自动地再次旋转.

我对方向变化有什么反应?

为您添加一个收听器 screenOrientationChange 使用 addListener(...) 方法。 收听者每次屏幕取向变化时都会收到新的取向类型. 使用 removeAllListeners() 在你不再需要时删除所有听众.

我能用这个插件吗? 有Ionic、React、Vue或Angular?

是的,插件是框架不可知的。 它在任意网络框架的Capacitor app中工作,包括有Angular,React,或Vue的Ionic,以及平版JavaScript等项目.

通讯

随时更新有关卡帕韦索姆、Capacitor和Ionic生态系统的最新消息和最新消息,因为我们 《卡帕索克通讯》。 。 。 .

更改日志

见 变动情况。 。 。 .

许可证

见 自由主义。 。 。 .

贷项

此插件基于 电容屏幕方向 插件 . 感谢所有为这个项目捐款的人!

版本与发布记录

@capawesome/capacitor-screen-orientation 共发布 19 个版本,首次发布于 2022/08/04;过去 12 个月发布了 7 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
8.0.4latest2026/10/2119 天前
8.0.32026/09/022 个月前
8.0.22026/08/162 个月前
8.0.12026/02/198 个月前
8.0.02025/12/1710 个月前
7.0.0-dev.1765885034dev2025/12/1610 个月前

关于 @capawesome/capacitor-screen-orientation 的常见问题

@capawesome/capacitor-screen-orientation 是什么?

控制器插件可以锁定/解锁Android,iOS,和Web上的屏幕取向.

如何安装 @capawesome/capacitor-screen-orientation?

在项目目录运行 npm install @capawesome/capacitor-screen-orientation,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:@capacitor/core(>=8.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@capawesome/capacitor-screen-orientation 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@capawesome/capacitor-screen-orientation 支持 ESM 还是 CommonJS?

同时提供 ES Module 与 CommonJS 入口,import 和 require() 都可以使用,打包工具会自动选择合适的版本。

@capawesome/capacitor-screen-orientation 可以商用吗?

@capawesome/capacitor-screen-orientation 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@capawesome/capacitor-screen-orientation 的下载量有多少?

根据 npm 官方下载统计,@capawesome/capacitor-screen-orientation 在 2026/10/09 – 2026/11/07 这 30 天内被下载 95,321 次,日均约 3,177 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@capawesome/capacitor-screen-orientation 还在维护吗?

最新版本 8.0.4 发布于 2026/10/21(19 天前);至今共发布 19 个版本,其中过去 12 个月发布了 7 个;首次发布于 2022/08/04。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。