screenOrientation配置仅对App端生效,H5和小程序不支持;App端需在manifest.json配置并修改iOS的Info.plist与Android的AndroidManifest.xml原生文件才能真正锁定方向。

uni-app 的 screenOrientation 配置只在 App 平台生效
Web 和小程序不支持横竖屏锁定,这是原生能力限制。你改了 manifest.json 或 vue.config.js 里的设置,在 H5 打开依然能旋转,别怀疑配置——它本来就不起作用。
真正生效的只有 uni-app 编译为 iOS/Android 原生 App 时,且必须配合原生层配置:
- iOS:在
unpackage/res/ios/Info.plist中手动添加UISupportedInterfaceOrientations和UISupportedInterfaceOrientations~ipad - Android:修改
unpackage/res/android/AndroidManifest.xml,给对应加上android:screenOrientation="landscape"(或"portrait") - uni-app 层只需在
manifest.json的h5和mp-weixin字段下写的配置,对 App 完全无效
App 启动时锁定横屏的正确写法
仅靠 manifest.json 不够,必须双端分别处理。最稳妥路径是:
- 在
manifest.json的name同级加字段:"orientation": "landscape"(注意不是在h5下),这个值会被 uni-app 编译器读取并注入到原生配置中 - 但 iOS 仍需检查
Info.plist是否含:<key>UISupportedInterfaceOrientations</key><array><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string></array>
- Android 端若发现旋转异常,直接打开
AndroidManifest.xml,找到和主 Activity,确保两者都带android:screenOrientation="landscape"
运行时动态切换横竖屏(仅 Android 支持)
iOS 系统不允许 App 运行时强制旋转屏幕,调用 uni.setScreenOrientation 在 iOS 上静默失败;Android 则可有限使用:
-
uni.setScreenOrientation({ orientation: 'landscape' })只在 Android 生效,且要求 targetSdkVersion ≥ 28 且 activity 没有硬编码screenOrientation - 若你已在
AndroidManifest.xml中锁死screenOrientation="landscape",此 API 将无反应 - 想实现“首页横屏 + 详情页竖屏”,得把不同页面设为不同 Activity(通过
subNVue或原生插件),纯 Vue 页面无法做到运行时切换
真机调试时横屏不生效的三个高频原因
不是代码问题,而是环境或配置漏项:
- 没清空原生工程缓存:改完
manifest.json后,必须删掉unpackage目录,重新点击“发行 → 原生App-云打包”或“本地打包”,否则旧配置残留 - iOS 模拟器默认禁用旋转:Xcode 模拟器菜单栏勾选
Hardware → Rotate Left/Right才能看到效果;真机则需关闭系统“竖排方向锁定”开关 - Android 手机开启了“自动旋转”但系统级限制:部分厂商(如华为 EMUI)会拦截第三方 App 的横屏请求,需在手机设置里为该 App 单独开启“横屏旋转权限”
横竖屏不是 CSS 能控制的事,它卡在原生容器层。配置写对、缓存清干净、真机开关关对,三者缺一不可。











