app端强制横屏必须修改原生配置,js层uni.setscreenorientation在ios和android 12+上基本无效;需分别配置ios的info.plist中uisupportedinterfaceorientations和android的androidmanifest.xml中android:screenorientation="landscape",并重新云打包。

App端强制横屏必须改原生配置,JS层调用无效
uni-app 的 uni.setScreenOrientation 在 iOS 真机上基本不生效,返回 { result: 'fail', errMsg: 'not supported' };Android 12+ 也常被系统拦截,尤其当 targetSdkVersion ≥ 31 或 android:screenOrientation 已硬编码时。这不是你代码写错,而是系统级限制——Web 层无权绕过。
真正起效的路径只有一条:让原生容器(iOS 的 ViewController / Android 的 Activity)从启动就声明为横屏。CSS 的 transform: rotate(90deg) 是视觉假横屏,会导致触摸坐标错乱、Canvas 尺寸异常、键盘弹不出,游戏或视频页绝对不能用。
- iOS 配置位置在
unpackage/res/ios/Info.plist,需手动添加UISupportedInterfaceOrientations键,值为数组:["UIInterfaceOrientationLandscapeLeft", "UIInterfaceOrientationLandscapeRight"] - Android 配置位置在
unpackage/res/android/AndroidManifest.xml,找到对应<activity></activity>标签,加属性:android:screenOrientation="landscape" - 改完必须删掉
unpackage目录,重新云打包或生成自定义基座——“运行到手机”热重载不会生效
manifest.json 的 app-plus.distribute 配置已弃用
新版 uni-app(3.9+)中,manifest.json 里的 app-plus.distribute.ios.orientation 和 app-plus.distribute.android.orientation 字段已被移除。如果你还在用这类配置,它不会写入原生工程,等于没配。
正确做法是直接编辑原生文件:Info.plist 和 AndroidManifest.xml。别再依赖 manifest.json 的 distribute 节点做 App 横屏控制。
- iOS 不接受字符串
"landscape",只认"UIInterfaceOrientationLandscapeLeft"和"UIInterfaceOrientationLandscapeRight"这两个固定字符串 - Android 不区分主次方向,填
"landscape"即可,填"sensorLandscape"反而可能导致旋转异常 - 若只希望某页面横屏(如游戏页),Android 可单独为该 Activity 配
android:screenOrientation;iOS 则必须用原生插件动态调用[[UIDevice currentDevice] setValue:@(UIInterfaceOrientationLandscapeRight) forKey:@"orientation"],纯 JS 无法实现
横屏 UI 适配的关键陷阱:不要信 uni.getSystemInfo 的宽高
很多开发者用 uni.getSystemInfoSync().screenWidth 和 screenHeight 当画布尺寸,结果横屏时 Canvas 被拉伸或裁剪——因为该 API 返回的是设备物理屏幕尺寸,不是当前朝向下的可用视口尺寸。
正确做法是监听原生横竖屏事件后动态读取。uni-app 没暴露标准事件,但可结合条件判断:
- 在横屏原生配置生效后,用
uni.getSystemInfoSync().windowWidth和windowHeight获取当前视口尺寸(比 screenWidth/Height 更可靠) - Canvas 初始化时,按
windowWidth > windowHeight判断是否真横屏,再设置 canvas.width/canvas.height - 避免用
v-bind:style="{ width: screenWidth + 'px' }"这类写法,横屏后宽度值仍是竖屏物理值
视频播放后方向不恢复?得手动锁回竖屏
原生全屏视频退出后,uni-app 不会自动还原屏幕方向。用户从横屏视频页返回,页面可能卡在横屏状态,且后续所有页面都受影响。
必须监听播放器状态,在结束或空闲时主动恢复:
- 使用
plus.video.Player.onstatechanged,当state === 0(idle)或state === 4(ended)时,调用plus.screen.lockOrientation('portrait-primary') - 不要依赖
onUnload或onHide,因为播放器生命周期独立于 Vue 页面 - Android 上部分机型还需配合
plus.navigator.setFullscreen(false)才能彻底释放方向锁
最易被忽略的点:横屏配置和 UI 适配是两件事。原生锁住方向只是第一步,后续所有布局、Canvas、输入框、滚动行为都得按真实横屏逻辑重算——否则用户看到的是“能转但不能用”的页面。











