【问题标题】:Ionic 3 - splash screen sizeIonic 3 - 启动画面大小
【发布时间】:2023-03-16 19:08:02
【问题描述】:

我需要为我的 ionic 3 应用程序生成启动画面。有的网站说闪屏图片的正确尺寸应该是2732*2732,有的网站说闪屏尺寸应该是2208*2208,哪个是正确的?但是我们尝试使用 2732*2732,但是在生成闪屏后,图像不适合设备,并且在设备中显示时闪屏太大。任何人对此有任何想法?

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

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

ionic cordova resources

谢谢

【问题讨论】:

  • Splash 图像大小为 2732 * 2732。Ionic 会根据设备大小自动生成其他启动画面。但是启动画面不适合屏幕,然后根据 config.xml 中的给定大小制作自定义图像

标签: ionic3 splash-screen appicon


【解决方案1】:

初始屏幕的源图像最好至少为 2732×2732 像素。但是只使用这种大小的背景白色屏幕,图标位置集中。不要使用这种大小的图标。

【讨论】:

    【解决方案2】:

    当您使用ionic cordova platform add 添加平台时,它会在根文件夹中生成一个名为resources 的文件夹。在resources 中,您会发现生成的icon.pngsplash.png 文件大小正确,即1024x10242732x2732。就我而言,您应该使用确切的尺寸,而不是更小,而不是更大。

    【讨论】:

      【解决方案3】:

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

      这对我来说很好用:

      图标

      1. 创建您的图标 icon.pngicon.psdicon.ai。对我来说,我创建了带有 png 扩展名的 1024x1024 图标
      2. 将您的图标保存到 resources 目录(示例:your-project/resources/icon.png
      3. 只需使用 ionic cordova 资源 --icon

      飞溅

      1. 创建您的启动画面 splash.pngsplash.psdsplash.ai。对我来说,我创建了带有 png 扩展名的启动画面 4816x4816
      2. 将您的启动画面保存到 resources 目录(示例:your-project/resources/splash.png
      3. 只需使用 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>
      

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

      【讨论】:

        【解决方案4】:

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

        在某些网站中,他们提到尺寸为 2208*2208。这就是困惑。

        因此,启动图像的问题现在已解决。

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

        谢谢

        【讨论】:

        • 你是对的!源图像的最小尺寸应为 2732×2732 像素。 Ionic 团队说:启动画面的艺术作品应该大致适合中心正方形(1200×1200 像素)。此模板提供有关艺术品安全区的建议尺寸和指南。 ionicframework.com/blog/automating-icons-and-splash-screens
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-08-29
        • 2019-05-11
        相关资源
        最近更新 更多