uniapp +vue3 横屏 配置

uniapp Vue3 完整横屏配置教程（分 3 种场景，一步一步操作）

场景 1：单个页面横屏（推荐，App / 微信小程序 / H5 全都支持）

步骤 1：找到当前页面文件夹

页面结构示例
plaintext
 
 
pages/
  index/
    index.vue  页面代码
    index.json  页面配置文件
 

步骤 2：打开同目录的 index.json，粘贴代码

json
 
 
{
  "navigationBarTitleText": "横屏页面",
  "pageOrientation": "landscape"
}
 
参数说明：
  • landscape：横屏，手机左右翻转都适配
  • landscape-primary：只允许正向横屏，不能反向
  • portrait：竖屏（默认）
  • auto：自动跟随手机旋转

步骤 3：保存重新编译生效

  • 小程序：重新编译
  • App 真机 / 模拟器：重新运行
  • H5：刷新页面

场景 2：整个 App 全部页面强制横屏（仅 App 端生效，小程序无效）

步骤 1：项目根目录打开 manifest.json

步骤 2：切换到【源码视图】，找到 app-plus 节点

json
 
 
{
  "app-plus": {
    "screenOrientation": "landscape",
    // 其他原有配置不动
    "usingComponents": {}
  }
}
 

步骤 3：保存，重新云打包 / 本地真机运行才会生效

注意：此配置只对安卓、iOS App 生效，微信 / 支付宝小程序不识别

场景 3：进入页面动态切换横屏，离开恢复竖屏（仅 App 端）

页面 .vue 文件 <script setup> 完整代码
vue
 
 
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // #ifdef APP-PLUS
  // 锁定横屏
  plus.screen.lockOrientation('landscape')
  // #endif
})

onUnmounted(() => {
  // #ifdef APP-PLUS
  // 退出页面恢复竖屏
  plus.screen.lockOrientation('portrait')
  // #endif
})
</script>
 
#ifdef APP-PLUS 是条件编译，防止小程序 / H5 运行时报错。

补充：H5 端全局横屏配置

  1. 项目根目录 index.html
  2. 在 <head> 内添加 meta 标签
html
 
预览
 
 
 
<meta name="screen-orientation" content="landscape">
<meta name="x5-orientation" content="landscape">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 

样式适配（横屏必加，防止内容溢出）

页面 style 中写入：
css
 
 
page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
 

常见问题

  1. 小程序动态代码改横屏无效：小程序只能 json 静态配置，js 无法切换
  2. manifest 改完不生效：App 需要重新运行 / 打包，热更新不生效
  3. 页面变形：加上上面的 page 全屏样式
posted @ 2026-07-02 10:14  张筱菓  阅读(1)  评论(0)    收藏  举报