PWA Android / chrome splashscreen上显示错误图标

Question

这是manifest.json我用来使我的PWA上出现chrome / android splashscreen上最大的图标：

{
"name": "App name",
"short_name": "App name",
"icons": [                
    {  
      "src": "icons/touchIcon-192x192.png",
      "sizes": "192x192",  
      "type": "image/png"  
    },  
    {  
      "src": "icons/touchIcon-256x256.png",
      "sizes": "256x256",  
      "type": "image/png"  
    },  
    {  
      "src": "icons/touchIcon-384x384.png",
      "sizes": "384x384",  
      "type": "image/png"  
    },  
    {  
      "src": "icons/touchIcon-512x512.png",
      "sizes": "512x512",  
      "type": "image/png"  
    }
],
"background_color": "#323A4F",
"theme_color": "#323A4F",
"start_url": "/?standalone",
"display": "standalone",
"orientation": "portrait",
"lang": "fr"

}

问题是镀铬总是在屏幕中央显示一个非常小的图标，大约48px我认为......

任何的想法 ？提前致谢 ！

Answer 1

经过一些试验和挫折，我发现你必须只在清单中指定512px的图标，否则它将使用较低的DP图标作为应用程序图标，并基于它将使用大或小布局的飞溅。你可以在这里阅读更多相关信息：这里：https://github.com/GoogleChrome/lighthouse/issues/291

Answer 2

据this document说：

128dp是启动画面上图像的理想尺寸，因为这意味着不会对图像应用缩放。现在我们网络开发人员不处理dp。我们使用物理像素或CSS像素。在清单中的闪屏和配置的情况下，仅考虑物理像素。 1dp是1个物理像素，屏幕密度为160dpi。

1dp = 1px，160 dpi。

128dp，1x（160dpi）= 128px 128dp，1.5x（240dpi）= 192px（128 *（240/160））128dp，2x（320dpi）= 256px 128dp，3x（480dpi）= 384px（相当于Nexus 5）128dp at 4x（640dpi）= 512px（Nexus 6介于3和4之间）