如何打造跨设备适用的 App 启动页图片？

打造跨设备适用的 app 启动页图片

对于跨越各种设备的移动应用而言，设置适配不同屏幕大小的启动页图片至关重要。

适用多种设备的图片尺寸

确保您的启动页图片为以下分辨率：

• iphone 12 pro max/xs max/11 pro max：1242 x 2688 px
• iphone 12/12 mini/11/xr：828 x 1792 px
• iphone 8 plus/7 plus/6s plus：1080 x 1920 px
• iphone 8/7/6s：750 x 1334 px
• 安卓设备：随设备而异，通常为 1080 x 1920 px 或 1440 x 2560 px

在 uniapp 中调整图片：

1. 打开 uniapp 项目。
2. 在 manifest.json 文件中，找到 navigationbar 部分。
3. 添加以下代码：

"titlebar": {
    "padding": "0 100px"
}

4. 将您的启动页图片保存在项目根目录的 static 文件夹中。
5. 在 pages.json 文件中，将以下代码添加到您的启动页页面中：

{
    "path": "/pages/splash",
    "style": {
        "backgroundcolor": "#fff",
        "height": "100vh",
        "width": "100vw"
    },
    "usingcomponents": {
        "my-image": "@/components/my-image"
    }
}

6. 在 components 文件夹中，创建一个 my-image 组件并添加以下代码：

<view><image src="/static/splash.png" aspect-ratio="2.6:1" mode="scaleToFill"></image></view>

提示：

• 您可以使用在线工具（如 splashscreen.me）生成各种分辨率的图片。
• 确保图片大小不会影响启动时间。
• 定期检查新的设备型号并更新图片尺寸以确保兼容性。