PWA可遮罩图标（maskable icon）超出安全区域被放大问题求助

你遇到的问题确实存在，虽然Maskable图标设计初衷是保证在各种launcher的安全区域内显示，但部分国产安卓设备的自定义launcher可能存在兼容性问题，导致图标被异常放大。以下是可能的原因和解决办法：

可能的原因 #

• Launcher对SVG格式Maskable图标支持不足：部分厂商的launcher（比如小米的MIUI Launcher）对SVG格式的图标处理逻辑可能不完善，无法正确识别Maskable属性，进而错误缩放图标。
• 缺少非Maskable图标作为 fallback：你的manifest中只配置了Maskable图标，有些launcher可能优先尝试加载普通图标，找不到时会强制缩放现有图标来适配。
• Launcher的自定义缩放设置：部分小米设备的launcher提供了图标缩放的自定义选项，如果用户开启了“图标放大”功能，会强制放大所有应用图标，包括PWA的图标。
• SVG图标本身的 viewBox问题：如果你的SVG图标没有正确设置viewBox，或者存在多余的空白区域，launcher可能会错误计算图标实际尺寸，导致缩放超出安全区域。

解决办法 #

1. 添加PNG格式的多尺寸Maskable图标
   替换或补充PNG格式的Maskable图标，提供多种常见尺寸（如192x192、512x512），因为大部分launcher对PNG图标的兼容性更好。修改后的manifest示例：

   {
       "name": "آمادمی",
       "short_name": "آمادمی",
       "description": "آکادمی آنلاین فارسی",
       "lang": "fa-IR",
       "dir": "rtl",
       "start_url": "/",
       "display": "standalone",
       "theme_color": "white",
       "background_color": "white",
       "icons": [
           {
               "src": "/icon-maskable-192x192.png",
               "sizes": "192x192",
               "purpose": "maskable"
           },
           {
               "src": "/icon-maskable-512x512.png",
               "sizes": "512x512",
               "purpose": "maskable"
           },
           {
               "src": "/icon-192x192.png",
               "sizes": "192x192",
               "purpose": "any"
           }
       ]
   }
   

2. 补充普通图标作为 fallback
   在icons数组中添加purpose="any"的普通图标，让不支持Maskable图标的launcher有合适的备选方案，避免强制缩放。

3. 检查设备launcher设置
   告知用户检查小米设备的launcher设置，是否开启了“图标大小”或“图标放大”的自定义选项，将其调整为默认值即可解决问题。

4. 优化SVG图标属性
   确保你的SVG图标正确设置了viewBox属性，并且图标内容严格位于Maskable工具建议的安全区域内，避免多余空白导致的缩放计算错误。

内容的提问来源于stack exchange，提问作者Arad