Ionic 3 - 启动画面大小

Question

我需要为我的 ionic 3 应用程序生成闪屏。一些网站提到启动画面图像的正确大小应为 2732*2732，而其他一些站点提到启动画面大小应为 2208 * 2208。哪一个是正确的？然而，我们尝试使用 2732*2732，但在生成闪屏后，图像不适合设备，并且在设备中显示时闪屏太大。有人对此有任何想法吗？

应用程序图标大小应为 1024*1024，并且工作正常。

我们执行以下命令为 android 和 iOS 设备的不同尺寸的设备生成图标和启动画面。

ionic cordova resources

谢谢

Answer 1

启动画面的源图像最好至少为 2732×2732 像素。但是只能使用这种尺寸的背景白屏，图标位置集中。不要使用这种尺寸的图标。

Answer 2

当您使用 ionic cordova platform add 添加平台时，它会在根文件夹中生成一个名为 resources 的文件夹。在 resources 中，您会发现生成的 icon.png 和 splash.png 文件具有正确的大小，即 1024x1024 和 2732x2732。就我而言，您应该使用准确的尺寸，不能更小，也不能更大。

Answer 3

我认为最好的方法是使用 Ionic 3 的启动画面和图标生成器。

这对我来说很好用：

ICON

创建您的图标 icon.png 或 icon.psd 或 icon.ai 。对我来说，我创建了带有 png 扩展名的 1024x1024 图标
将您的图标保存到 resources 目录中（示例：your-project/resources/icon.png）
并且只需使用 ionic cordova 资源 --icon

飞溅

创建您的启动画面splash.png或splash.psd或splash.ai 。对我来说，我创建了带有 png 扩展名的启动画面 4816x4816
将启动图保存到 resources 目录（示例：your-project/resources/splash.png）
并且只需使用 ionic cordova 资源 --splash

在您的 config.xml 文件中，您会看到这样生成的代码：

<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <icon height="57" src="resources/ios/icon/icon.png" width="57" />
    <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
    <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
    <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
    <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
    <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
    <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
    <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
    <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
    <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
    <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
    <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
    <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
    <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
    <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
</platform>

如果这不起作用，您可能需要先生成平台。

Answer 4

我们更改了初始图像，现在新图像 (2732*2732) 图标已居中。因此，在裁剪图像时，中心图标不会被裁剪，现在在所有设备上都可以正常工作。

在某些网站中，他们提到的尺寸为 2208*2208。就这样糊涂了。

所以启动图像的问题现在已经解决了。

启动画面的唯一问题是启动画面的图标应该居中。否则在生成启动画面时图像将被裁剪。

谢谢

Ionic 3 - 启动画面大小

Ionic 3 - splash screen size

ionic3

splash-screen

appicon

ICON

飞溅