Ionic 3 - 启动画面尺寸

Question

我需要为我的ionic 3应用生成启动屏幕。一些网站提到正确的启动屏幕图像大小应该是2732*2732，而另一些网站提到启动屏幕大小应该是2208*2208。哪一个是正确的？然而我们尝试了2732*2732，但是在生成启动屏幕后，图像不适合设备，启动屏幕在设备上显示过大。有人对此有什么想法吗？

应用程序图标大小应该是1024*1024，它可以正常工作。

我们执行以下命令为android和iOS设备的不同大小生成图标和启动屏幕。

ionic cordova resources

谢谢

- Mindus

---

启动画面的尺寸为2732 * 2732。Ionic会根据设备尺寸自动生成其他启动画面。但如果启动画面不适合屏幕，则可以根据config.xml中给定的尺寸制作自定义图片。 - keval nayak

Answer 1

我们更换了启动画面的图片，现在新图片（2732*2732）的图标已经居中。因此，在裁剪图片时，中心图标不会被剪掉，并且在所有设备上都可以正常工作。

在某些网站上，他们将大小标注为2208*2208，这让我们感到困惑。

所以现在启动画面的问题已经解决了。

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

谢谢。

- Mindus

---

你是正确的！源图像的最小尺寸应为2732×2732像素。Ionic团队表示：启动画面的艺术作品应大致适合于中心正方形（1200×1200像素）。此模板提供了有关艺术作品安全区域的推荐大小和指南。https://ionicframework.com/blog/automating-icons-and-splash-screens/ - Guilherme Sampaio

Answer 2

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

以下是我使用的方法：

ICON

1. 创建您的图标icon.png或icon.psd或icon.ai。我创建了一个1024x1024大小的png扩展名的图标。 2. 将您的图标保存到资源目录中(例如：your-project/resources/icon.png)。 3. 然后只需使用ionic cordova resources --icon命令即可。

SPLASH

1. 创建您的启动画面splash.png或splash.psd或splash.ai。我创建了一个4816x4816大小的png扩展名的启动画面。 2. 将您的启动画面保存到资源目录中(例如：your-project/resources/splash.png)。 3. 然后只需使用ionic cordova resources --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/[e-mail]" width="114" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/[e-mail]" width="80" />
    <icon height="120" src="resources/ios/icon/[e-mail]" width="120" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/[e-mail]" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/[e-mail]" width="120" />
    <icon height="180" src="resources/ios/icon/[e-mail]" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/[e-mail]" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/[e-mail]" width="152" />
    <icon height="167" src="resources/ios/icon/[e-mail]" width="167" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/[e-mail]" width="58" />
    <icon height="87" src="resources/ios/icon/[e-mail]" 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>

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

- XenoX

Answer 3

当你使用 ionic cordova platform add 命令添加平台时，它会在根目录下生成一个名为 resources 的文件夹。在 resources 文件夹中，你会找到已生成的 icon.png 和 splash.png 文件，它们的正确尺寸分别是 1024x1024 和 2732x2732。据我所知，你应该使用这些确切的尺寸，不要更小也不要更大。

- Rob

Answer 4

启动画面的源图像最好至少为2732×2732像素。但是只使用此大小的白色背景屏幕，并将图标位置置于中心。不要使用此大小的图标。

- Mangesh Daundkar