uni-app怎么禁止屏幕旋转 uni-app强制竖屏显示配置【解决】

3次阅读

manifest.json 的 orientation 配置仅对 App 生效，H5 和小程序完全忽略；App 端需重新打包且配合 plus.screen.lockOrientation() 才能真正锁定方向，H5 需 CSS+JS 模拟，小程序须在 mp-weixin/mp-qq 下配置 pageOrientation。

uni-app 怎么禁止屏幕旋转 uni-app 强制竖屏显示配置【解决】

很多人改了 manifest.json 发现横屏还是能转，根本原因是：这个配置仅作用于 app-plus（即打包成 iOS/Android 原生应用时），H5 页面完全无视它，微信 /QQ 小程序也压根不读这一项。

实操建议：

确认你当前调试的是真机 App（不是浏览器预览、不是微信开发者工具）
App 端必须重新打包（不是热更新、不是云打包缓存），否则修改不生效
H5 场景下，pageOrientation 和 screenOrientation 全部无效，只能靠 CSS + JS 模拟锁定（但系统级旋转无法禁用）
微信小程序要强制竖屏，得走 mp-weixin 子配置，且只支持单页面粒度

pageOrientation 是 uni-app 提供的最常用方向控制字段，但它在不同平台行为完全不同：

App 端：支持 "portrait" / "landscape" / "auto"，配合 plus.screen.lockOrientation() 才能真正“锁住”
微信小程序：必须嵌套在 mp-weixin 对象里，例如 "mp-weixin": {"pageOrientation": "portrait"}
QQ 小程序：同微信，用 mp-qq 包一层
H5：该字段被完全忽略，写了也没用

常见错误现象：在 pages.json 里给全局 globalStyle 设置了 pageOrientation: "portrait"，结果小程序里进页面还是能横屏——因为没加 mp-weixin 包裹，平台直接跳过解析。

调用 plus.screen.lockOrientation('portrait-primary') 是 App 端最可靠的锁定方式，但它极易失效：

必须用 #ifdef APP-PLUS 包裹，否则 H5 或小程序编译会报 plus is not defined
不能在 onLoad 立即调用，部分 Android 机型渲染未就绪，需加 setTimeout 延迟 300–1200ms
离开页面时记得在 onUnload 解锁或切回默认方向，否则其他页面可能被意外锁定
iOS 真机上，如果 manifest.json 里没放开对应方向（比如只写了 ["landscape-primary"]），lockOrientation 强制设 portrait-primary 也会失败

示例正确写法：

onShow() {   //#ifdef APP-PLUS   setTimeout(() => {plus.screen.lockOrientation('portrait-primary');   }, 800);   //#endif } onUnload() {   //#ifdef APP-PLUS   plus.screen.unlockOrientation();   //#endif }

uni-app 的 pages.json 和 manifest.json 都不支持“按设备类型区分横竖屏”。想让 iPhone 强制竖屏、iPad 强制横屏，必须侵入 iOS 原生层：

在 manifest.json 的 app-plus → ios → InfoPlist 下添加两个键：UISupportedInterfaceOrientations~iphone 和 UISupportedInterfaceOrientations~ipad
前者填 ["UIInterfaceOrientationPortrait"]，后者填 ["UIInterfaceOrientationLandscapeLeft", "UIInterfaceOrientationLandscapeRight"]
这个配置只影响 iOS，Android 需另配 android:screenOrientation="portrait" 在 AndroidManifest.xml 里