Question

This is the manifest.json I use to make appear the largest icon possible on chrome/android splashscreen for my PWA :

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

}

The problem is that chrome always displays a very very small icon at center of screen, about 48px I think...

Any idea ? thanks in advance !

Answer 1

根据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，4x（640dpi）= 512px（Nexus 6是   在3和4之间）

Answer 2

经过一番试验和挫折，我发现你必须只在清单中指定512px的图标，否则它将使用较低的DP图标作为应用程序图标，并基于它将使用大或小布局为了飞溅。您可以在此处详细了解：https://github.com/GoogleChrome/lighthouse/issues/291

Bad icon displayed on PWA Android/chrome splashscreen

2 个答案: