PWA Android/chrome 闪屏上显示的错误图标

Question

这是 manifest.json 我用来在我的 PWA chrome/android 闪屏上显示最大图标的图标：

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

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

有什么想法吗？

Answer 1

根据this document：

128dp is the ideal size for the image on the splash screen as it means no scaling will be applied to the image. Now we web developers don't deal with dp's. We use physical pixels or CSS pixels. In the case of splash screen and configuration in the manifest only physical pixels are considered. 1dp is 1 physical pixel at a screen density of 160dpi.

1dp = 1px at 160 dpi.

128dp at 1x (160dpi) = 128px 128dp at 1.5x (240dpi) = 192px ( 128 * ( 240 / 160 ) ) 128dp at 2x (320dpi) = 256px 128dp at 3x (480dpi) = 384px (Equivalent to Nexus 5) 128dp at 4x (640dpi) = 512px (Nexus 6 is in between 3 and 4)

Answer 2

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

PWA Android/chrome 闪屏上显示的错误图标

Bad icon displayed on PWA Android/chrome splashscreen

android

google-chrome

splash-screen

manifest