uni-app 设置静态图片启动页不适配横向平板

在 uni-app 中设置静态图片作为启动页，并确保其在横向平板设备上也能适配，关键在于正确配置启动图资源以及利用 CSS Flexbox 布局来确保图片在不同屏幕方向上的适配性。以下是一个示例代码和配置指南，帮助你实现这一需求。

1. 准备启动图资源

首先，你需要准备适用于不同屏幕尺寸和方向的启动图资源。通常，你需要提供至少以下四种方向的图片（以 Android 为例，iOS 类似）：

• splash.png（竖屏）
• splash_landscape.png（横屏）
• splash_portait_hdpi.png, splash_landscape_hdpi.png（高密度屏）
• splash_portait_xhdpi.png, splash_landscape_xhdpi.png（超高密度屏）

2. 配置 manifest.json

在 uni-app 的 manifest.json 文件中，配置启动图路径。注意，这里需要分别配置竖屏和横屏的启动图。

"mp-weixin": { // 示例配置，针对微信小程序，其他平台类似
    "appid": "your-app-id",
    "setting": {
        "launchShow": true,
        "launchImage": {
            "path": "static/splash", // 基础路径
            "width": "750px", // 可选，指定宽度
            "height": "1334px", // 可选，指定高度
            "orientation": "portrait", // 默认竖屏
            "landscapeImage": "static/splash_landscape" // 横屏图片路径
        }
    }
}

3. 使用 Flexbox 确保图片适配

虽然启动图本身由平台控制显示，不需要你通过代码布局，但如果你需要在应用内部模拟类似行为（例如，在特定页面显示类似启动图的图片），可以使用 Flexbox 布局确保图片在不同方向上都能居中且不失真。

<template>
    <view class="container">
        <image class="splash" src="/static/splash.png" mode="aspectFill"></image>
    </view>
</template>

<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.splash {
    width: 100%;
    max-width: 750px; /* 根据你的设计图调整 */
    height: auto;
}
</style>

注意：这里的 image 标签的 mode 属性设置为 aspectFill，确保图片保持纵横比填充容器，同时避免图片被拉伸变形。

通过上述步骤，你可以确保 uni-app 的启动图在横向平板设备上也能正确显示和适配。记住，启动图的实际显示效果还依赖于具体平台的实现细节，因此测试在不同设备和平台上的表现是必要的。