uniapp 横屏展示

uniapp Vue3 移动端强制横屏方案

分两种场景：全局全部页面横屏、单个页面单独横屏，兼容 App、小程序、H5

一、全局所有页面强制横屏（App 端有效）

1. manifest.json 配置（推荐 App）

打开 manifest.json → app-plus → 屏幕适配

json

 

 

"app-plus": {
    "screenOrientation": "landscape"
}

 

可选值：

• landscape：强制横屏（左右横屏自动旋转）
• landscape-primary：仅正向横屏，禁止反向
• portrait：竖屏（默认）

2. H5 全局横屏

index.html meta 标签

html

 

预览

 

 

 

<meta name="screen-orientation" content="landscape">
<meta name="x5-orientation" content="landscape">

 

二、单个页面单独横屏（Vue3 setup 语法）

方式 1：页面 json 配置（最简单，App / 小程序 / H5 通用）

页面同目录 xxx.json 文件写入：

json

 

 

{
    "pageOrientation": "landscape"
}

 

支持值：

• landscape 横屏
• portrait 竖屏
• auto 跟随手机重力旋转

注意：小程序页面横屏必须在页面 json 配置，代码动态修改无效

方式 2：API 动态切换屏幕（仅 App 端有效，uni-app 官方 API）

Vue3 script setup 写法

ts

 

 

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
    // 切换横屏
    plus.screen.lockOrientation('landscape')
})
onUnmounted(() => {
    // 离开页面恢复竖屏
    plus.screen.lockOrientation('portrait')
})

 

需要条件编译防止小程序 / H5 报错：

ts

 

 

// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape')
// #endif

 

三、H5 页面 JS 强制横屏（兼容性一般）

ts

 

 

// #ifdef H5
screen.orientation.lock('landscape');
// #endif

 

四、样式适配横屏（必加）

横屏后页面宽高会颠倒，页面根容器适配：

css

 

 

page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}