无法在 Android Chrome PWA 上获取启动画面图标 [英] Can't get splash screen icon on Android Chrome PWA

问题描述

我创建了一个可以正确安装的 PWA，并带有启动器图标.我想要一个不同的启动画面图像，所以我已经包含了 192px 和 512px png，都是 128dpi 并将它们都列在 manifest.json 中 - 但是，我的启动画面仍然显示启动器图标(我在 36、48、72、96、128、144 像素版本)

I've created a PWA that installs correctly, with a launcher icon. I want a different image for the splash screen, so I've included 192px and 512px png's, both 128dpi and listed them both in manifest.json - however, my splash screen still displays the launcher icons (which I have provided in 36, 48, 72, 96, 128, 144 px versions)

如何确保启动画面与启动器图标使用正确的图像?

How do I ensure the correct image gets used for splash screen vs launcher icon?

manifest.json:

manifest.json:

{
  "short_name": "app",
  "name": "app",
  "icons": [
    {
      "src": "assets/pwa/android-launchericon-36-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-48-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-72-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-96-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-128-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-144-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-192-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/splash-512-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "orientation": "portrait"
}

推荐答案

根据此 文档，正如您所知，Chrome 会选择与该设备的 128dp 图标最匹配的图标.

According to this documentation, as you have already known, Chrome will choose the icon that closely matches the 128dp icon for that device.

请注意dp(与密度无关的像素)与dpi(每英寸点数)不同.简单地说，128dpi 不一定等于 128dp，这很可能是你的问题.

Please take note that dp (Density-independent Pixels) is different from dpi (Dots Per Inch). Simply put, 128dpi is not necessarily equal to 128dp, which is most likely the problem in your case.

这个SO answer很好地解释了两者之间的区别.

This SO answer explains the difference between the two well.

例如，在 160dpi 屏幕上，1dp == 1px == 1/160in，但在240dpi 屏幕，1dp == 1.5px.所以不，1dp != 1px.正好有一个1dp == 1px 的情况，并且在 160dpi 屏幕上.身体的像英寸这样的测量单位永远不应该成为你设计的一部分——是的，除非你正在制作一把尺子.

For example, on a 160dpi screen, 1dp == 1px == 1/160in, but on a 240dpi screen, 1dp == 1.5px. So no, 1dp != 1px. There is exactly one case when 1dp == 1px, and that's on a 160dpi screen. Physical measurement units like inches should never be part of your design—that is, unless you're making a ruler.

用于确定 1dp 计算出多少像素的简单公式是px = dp * (dpi/160).

A simple formula for determining how many pixels 1dp works out to is px = dp * (dpi / 160).

根据这个简单的公式，您的 192px, 128dpi 图像具有 240dp，而您的 512px, 128dpi 图像具有 640dp.假设您的其他图像也都具有 128dpi，那么 Chrome 很可能会选择您的 96px 图像，因为它具有与 dp 最接近的 dp>128dp.

Based on this simple formula, your 192px, 128dpi image has 240dp, while your 512px, 128dpi image has 640dp. Assuming your other images all have 128dpi as well, then Chrome is most likely picking your 96px image due to it having the closest dp to 128dp.

总而言之，要使您的 192px 或 512px 图像具有 128dp，它们需要具有 160dpi.

In conclusion, for your 192px or 512px images to have 128dp, they need to have 160dpi.

这篇关于无法在 Android Chrome PWA 上获取启动画面图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！