uniapp横屏app

实现UniApp横屏应用的方法

配置manifest.json文件
在项目根目录的manifest.json文件中，找到"app-plus"节点，添加屏幕方向设置。示例代码：

"app-plus": {
    "screenOrientation": [
        "landscape-primary",
        "landscape-secondary"
    ]
}

landscape-primary表示默认横屏，landscape-secondary表示反向横屏。

页面级横屏设置
若需单个页面强制横屏，在页面的onLoad生命周期调用API：

onLoad() {
    plus.screen.lockOrientation("landscape-primary");
}

退出页面时恢复竖屏：

onUnload() {
    plus.screen.lockOrientation("portrait-primary");
}

CSS适配横屏布局
通过媒体查询或动态计算窗口大小调整布局：

@media screen and (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}

或使用JavaScript动态获取屏幕宽高：

const { windowWidth, windowHeight } = uni.getSystemInfoSync();

注意事项

• 部分组件（如<video>）可能自带横屏逻辑，需测试兼容性。
• 微信小程序平台需单独在page.json中配置"pageOrientation": "auto"。
• Android原生端可能需在AndroidManifest.xml中设置screenOrientation属性。

多平台兼容性处理

微信小程序
在对应页面的page.json中配置：

{
    "pageOrientation": "landscape"
}

H5端适配
通过CSS媒体查询或监听orientationchange事件：

window.addEventListener("orientationchange", () => {
    console.log(window.orientation);
});

原生端补充配置

• Android：修改nativeplugins/AndroidManifest.xml，在<activity>标签内添加：

    android:screenOrientation="sensorLandscape"

• iOS：在Xcode中勾选Landscape Left和Landscape Right方向。