Question

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

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

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

ionic cordova resources

谢谢

Answer 1

We changed the splash image and now the new image (2732*2732) the icon has been centered. So while cropping the image the center icon won't cut and in all the devices it is working fine now.

In some sites they mentioned the size as 2208*2208. That's what confused.

So the problem with splash image now fixed.

The only problem for splash screen is that the icon of the splash screen should be centered. Otherwise image will get cropped while generating splash screen.

Thanks

Answer 2

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

这对我来说很好：

图标

创建图标 icon.png 或 icon.psd 或 icon.ai 。对我来说，我创建了带有png扩展名的图标1024x1024
将图标保存到资源目录（示例：your-project / resources / icon.png ）
只需使用离子科尔多瓦资源--icon

SPLASH

创建您的启动画面 splash.png 或 splash.psd 或 splash.ai 。对我来说，我创建了带有png扩展名的飞溅4816x4816
将启动画面保存到资源目录中（示例：your-project / resources / splash.png ）
只需使用离子科尔多瓦资源--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 3

初始屏幕的源图像理想上应至少为2732×2732px。但是只能使用图标大小集中的这种大小的背景白色屏幕。请勿使用此尺寸的图标。

Answer 4

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

离子3-启动画面尺寸

4 个答案:

图标

SPLASH