Question

我创建了一个带有启动器图标的PWA，可以正确安装。我要为初始屏幕使用不同的图像，因此我加入了192px和512px png的像素，两者均为128dpi，并在manifest.json中都列出了它们-但是，我的初始屏幕仍显示启动器图标（我在36、48中提供了这些图标，72、96、128、144像素版本）

如何确保将正确的图像用于启动屏幕和启动器图标？

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

Answer 1

您已经知道，根据此documentation，Chrome将选择与该设备的128dp图标非常匹配的图标。

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

此SO answer解释了两口井之间的区别。

例如，在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。

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

1 个答案: