uni-app实现点击按钮切换全屏 uni-app控制页面全屏显示-uni-app-PHP中文网

uni-app 中 screen.orientation.lock 在小程序平台不支持，H5 需用户手势同步调用；小程序应使用 uni.setScreenOrientation 配合自定义导航与满屏样式模拟全屏，跳转后需在目标页重新设置方向。

uni-app实现点击按钮切换全屏 uni-app控制页面全屏显示

uni-app 中调用 `screen.orientation.lock` 无效？

直接在 uni-app 里调用 Web API 如 screen.orientation.lock('landscape') 大概率失败，因为多数小程序平台（微信、支付宝）不支持该 API，H5 环境下也受制于浏览器策略：必须在用户手势（如 click）触发的同步上下文中调用，且部分安卓 WebView 会静默忽略。

实操建议：

仅在 H5 平台尝试全屏控制，小程序端需换思路（见下一条）
确保调用发生在原生事件回调内，不能包裹在 setTimeout 或异步 Promise.then 中
先检查 screen.orientation 是否存在且 type 可读，再调用 lock

H5 示例：

button.onClick = () => {
  if (screen.orientation && screen.orientation.lock) {
    screen.orientation.lock('landscape').catch(e => console.error('lock failed:', e));
  }
};

小程序平台（微信/支付宝）如何“模拟”全屏？

小程序没有真正的页面级全屏 API，但可通过 uni.setScreenOrientation 控制屏幕方向，并配合样式隐藏状态栏、导航栏，达到视觉全屏效果。

实操建议：

调用前需在 manifest.json 中配置允许的屏幕方向（如勾选“横屏”）
使用 uni.setScreenOrientation({orientation: 'landscape'}) 切换方向，注意该 API 在 iOS 微信中可能无响应
隐藏原生导航栏：在页面 json 配置中设 "navigationStyle": "custom"
隐藏状态栏：H5 用 document.documentElement.requestFullscreen()；小程序只能靠样式把内容撑满，例如 height: 100vh; width: 100vw; 并设 position: fixed; top: 0; left: 0;

点击按钮后页面内容被裁切或错位？

常见于横屏切换后，viewport 宽高未重算，或 CSS 布局仍按竖屏尺寸计算。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

实操建议：

监听 resize 事件（H5）或 onOrientationChange（小程序），动态更新根元素样式
避免写死 width: 375px 这类竖屏假设值，改用 vw/vh 或 calc(100vh - env(safe-area-inset-top))
横屏时若内容横向溢出，检查是否遗漏了 white-space: nowrap 或 overflow-x: hidden
真机调试时，微信开发者工具的“旋转”按钮不会触发 onOrientationChange，必须用真机测试

为什么 `uni.navigateTo` 后全屏状态丢失？

页面跳转会重建渲染上下文，之前通过 JS 设置的方向锁或全屏状态全部失效，且新页面默认按 manifest 配置初始化。

实操建议：

在目标页面的 onLoad 中立即再次调用 uni.setScreenOrientation
不要依赖上一页面的 JS 状态，把全屏意图作为参数传入，例如：uni.navigateTo({ url: '/pages/video/video?fullscreen=true' })
在目标页面 onShow 中补充一次方向检查和锁定，防止从后台切回时方向恢复
部分安卓机型（尤其 OPPO/Vivo）对频繁调用 setScreenOrientation 敏感，建议加防抖，间隔至少 300ms

实际最稳的路径是：H5 用原生 requestFullscreen + orientation.lock，小程序放弃“全屏”概念，专注用横屏 + 自定义导航 + 满屏布局来逼近体验。别指望一个 API 能跨端生效，各端限制点差异太大。