Gluon API是否支持强制应用始终保持竖屏模式即使用户旋转设备为横屏？

数据老陈

2026-9-30

固定应用竖屏模式的多端实现方案

以下是不同开发场景下的快速实现方法：

原生Android应用

找到项目AndroidManifest.xml文件，在需要固定竖屏的Activity标签中添加属性：
```
android:screenOrientation="portrait"
```

如需运行时动态强制竖屏，可在对应Activity中调用方法：

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT)

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

原生iOS应用

全局固定竖屏：打开项目Info.plist配置文件，找到UISupportedInterfaceOrientations字段，删除所有横屏相关选项，仅保留UIInterfaceOrientationPortrait（竖屏）项即可。
单页面固定竖屏：在对应ViewController中重写supportedInterfaceOrientations方法，返回UIInterfaceOrientationMaskPortrait。

跨端框架实现

Flutter

全局固定竖屏，在main.dart的main函数初始化应用前添加代码：

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);

React Native

可直接修改Android和iOS端的原生配置，和上述原生应用的实现方案一致即可。

uni-app

全局固定竖屏在pages.json的globalStyle节点添加配置：

"pageOrientation": "portrait"

单页面固定竖屏则在对应页面的style配置项中添加上述属性。

H5/Web页面

可通过CSS+JS组合实现强制竖屏显示效果：

先配置正确的viewport meta标签
添加CSS媒体查询适配横屏场景，强制旋转页面：

@media screen and (orientation:landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}