uni-app如何解决小程序中视频全屏旋转无法自适应-uni-app-PHP中文网

微信小程序video全屏时pageorientation配置无效，因全屏由原生容器接管；需用transform修正画面方向、vmin/vw替代rpx，并通过媒体查询或resize事件适配布局。

uni-app如何解决小程序中视频全屏旋转无法自适应

微信小程序 video 全屏后横竖错乱，`pageOrientation` 配置不生效怎么办

直接说结论：微信小程序的 video 组件全屏行为由微信原生容器接管，**不走页面级 pageOrientation 配置逻辑**，所以你在 pages.json 里设 "mp-weixin": { "pageOrientation": "landscape" } 对全屏状态完全无效。

真正起作用的是微信自己的全屏策略——它默认按设备物理方向旋转，且会强制重绘整个 WebView 容器，导致你页面的 CSS 布局、rpx 计算、甚至导航栏位置全部错位。

全屏时页面实际被“抽离”到独立的原生层，你的 Vue 生命周期、CSS 变量、rpx 单位都失效
onFullscreenChange 事件在小程序中只返回 { detail: { fullScreen: true } }，无法干预原生层旋转
真机测试必须开启手机系统设置里的「自动旋转」，否则微信会忽略任何方向请求

用 `transform: rotate()` 强制修正视频画面方向

当 iOS 出现「界面转 90°、视频再转 180°」这种倒立现象，本质是微信在横屏时对 video 元素加了未暴露的 transform。你不能删它，但可以覆盖。

关键不是锁方向，而是让画面视觉上“正过来”：

在全屏状态下，给 video 外层容器加 transform: rotate(0deg) 无效，要作用于 video 自身

iOS 上最稳定写法是：

video::-webkit-media-controls-panel { transform: rotate(0deg) !important; }
video { transform: rotate(0deg) !important; object-fit: contain; }

如果仍倒立，尝试 rotate(180deg) 或 scaleX(-1) —— 不同机型表现不同，需真机逐个验证

横屏布局适配必须放弃 `rpx`，改用 `vmin` 或 `vw/vh`

全屏触发后，微信会重设视口宽度（比如竖屏 375px → 横屏 667px），但 rpx 的基准仍是初始加载时的宽度，导致按钮变小、文字挤成一团。

微信小程序AI开发模式生成Skills

分析小程序项目源代码（含压缩/混淆），识别核心业务步骤，提取网络接口与 JSAPI 调用，生成符合 wx.modelContext 规范的技能分包（含原子接口 + 原子组件），并完成 app.json / project.config.json 配置集成。在以下场景触发：把小程序页面能力改造为小程序 AI 原子接口、生成 skills/ 分包代码、从源项目派生 MCP 工具、小程序 AI 的开发模式代码生成。仅负责静态生成，生成完成后必须交棒 wxa-skills-validate 做校验。

下载

替代方案只有两个靠谱的：

vmin：100vmin = 当前屏幕短边像素值，横竖切换时变化最小，适合字体、图标、圆角等保持视觉一致性
例如：font-size: calc(14vmin / 7.5);（≈14rpx 在 750 设计稿下）
vw：适合全屏容器宽度控制，比如横屏时让视频占满宽度：width: 100vw; height: 56.25vw;（16:9）
绝对禁止在横屏页用 flex: 1 + height: 100%，微信会把 100% 算成竖屏高度