无法在 Android Chrome PWA 上获取启动画面图标

Question

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

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

清单.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

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

请注意dp(Density-independent Pixels) 与dpi(Dots Per Inch) 不同。简单地说，128dpi不一定等于128dp，这很可能是您的情况的问题。

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

例如，在160dpi屏幕上，1dp == 1px == 1/160in，但在 240dpi屏幕上，1dp == 1.5px。所以不，1dp != 1px。当 时1dp == 1px，只有一种情况，那就是在160dpi屏幕上。物理测量单位（如英寸）永远不应成为您设计的一部分——也就是说，除非您正在制作尺子。

确定多少像素的一个简单公式1dp是 px = dp * (dpi / 160)。

根据这个简单的公式，您的192px, 128dpi图像具有240dp，而您的512px, 128dpi图像具有640dp。假设你的其他所有图像都128dpi为好，之后，Chrome是最有可能选择你的96px图像由于具有最接近它dp来128dp。

总之，要让您的192px或512px图像拥有128dp，他们需要拥有160dpi。