根本原因是微信小程序video全屏退出后视口尺寸未重置,rpx仍按横屏宽高比计算,导致样式错乱;需在manifest.json中配置screenorientation、退出时调用wx.setscreenorientation或screen.orientation.lock,并通过navigateto+navigateback强制重绘。

小程序 video 全屏后 rpx 计算失效导致样式错乱
根本原因是微信小程序在 video 全屏退出后,视口尺寸未重置,rpx 仍按横屏宽高比计算(比如 750rpx 变成 1334px 宽),但页面实际已回竖屏,导致字体撑大、布局错位。这不是 bug,而是小程序底层对 video 全屏生命周期的特殊处理——它不触发 resize 或 orientationchange 事件,rpx 引擎无法自动刷新。
必须在 manifest.json 中配置 screenOrientation
仅靠 JS 控制不够,小程序端需提前声明支持的方向,否则系统不放行方向锁操作。遗漏这步,plus.screen.lockOrientation 和 screen.orientation.lock 都会静默失败。
- 打开
manifest.json,在"app-plus"节点下添加:{"screenOrientation": ["portrait-primary", "landscape-primary"]} - 注意:不是
pages.json,也不是vue.config.js;该配置只对 App 端生效,但小程序端也需此字段“占位”才能启用方向 API(实测微信基础库 2.28+ 后强制要求) - 改完必须重新打包自定义基座,热更新无效
@fullscreenchange 里用 screen.orientation.lock 替代 plus.screen
plus.screen 在小程序环境不可用,直接调用会报 plus is not defined。真机调试时容易误以为逻辑没跑,其实是运行时就中断了。
- 监听事件写法:
<video ...></video>
- 方法内判断退出全屏并锁定竖屏:
handleFullscreenChange(e) {<br> if (!e.detail.fullScreen) {<br> // 小程序专用 API<br> if (wx && wx.setScreenOrientation) {<br> wx.setScreenOrientation({ orientation: 'portrait' });<br> } else if ('orientation' in screen) {<br> screen.orientation.lock('portrait-primary');<br> }<br> }<br>} - 不要依赖
e.target.webkitDisplayingFullscreen,iOS 小程序该属性始终为undefined
退出全屏后强制触发 rpx 重计算
即使方向锁成功,rpx 也不会立刻响应。最稳方案是让页面“重绘”一次——通过短暂跳转空白页再返回,触发视口重读。
- 新建
blank.vue页面,内容极简:<template><view></view></template><br><script><br>export default {<br> onLoad() {<br> setTimeout(() => uni.navigateBack({ delta: 1 }), 50);<br> }<br>}</script> - 在 video 页面的
handleFullscreenChange中加跳转:if (!e.detail.fullScreen) {<br> uni.navigateTo({<br> url: '/pages/blank',<br> animationType: 'none'<br> });<br>} - 关键点:不能用
uni.reLaunch或uni.redirectTo,必须用navigateTo + navigateBack组合,否则页面栈断裂











