progressive-web-apps - 无法在 Android Chrome PWA 上获取启动画面图标

Question

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

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

list .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"
}

Answer 1

根据这个documentation ，如您所知，Chrome 会选择与该设备的 128dp 图标最匹配的图标。

请注意 dp(与密度无关的像素)不同于 dpi(每英寸点数)。简而言之，128dpi 不一定等于 128dp，这很可能是您遇到的问题。

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

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.

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 最接近 >128dp.

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