乐趣区

关于前端:PWA-图标显示大小问题兼顾-macOSWindows

首先看 macOS 任务栏的图标法则:

会发现第三个:YouTube Music(PWA 版本)的图标很不对劲,不是因为它是圆形,其余都是方形。而是它很大,宽高显著大过其余图标。在我比照了 VSC 和 YouTube Music 的图标图片之后发现了区别所在:

下面看不显著的话,这么比照看就显著了:

解释下,图 3 是图 2 在控制台(F12)资源那里显示的图片,之所以看这个是因为能够看进去,图 2 外层有一圈红色的,其实也是图片的一部分,而且是通明的。
图 1 四角也有红色的,也是通明的。

所以当初能解释为什么 VSC 和 YouTube Music 的图标就算尺寸一样大,他们在 macOS 上显示的大小也不同了:VSC 有一圈通明白边,YM 没有。

在做 PWA 我的项目时,会波及到给 PWA 增加桌面图标的状况,即,在 manifest.icons 配置中增加图标设置,比方:

icons: [
          {
            src: 'logo64.png',
            sizes: '64x64 48x48 32x32 24x24 16x16',
            type: 'image/x-icon',
          },
          {
            src: 'logo192.png',
            type: 'image/png',
            sizes: '192x192',
          },
          {
            src: 'logo512.png',
            type: 'image/png',
            sizes: '512x512',
          },
        ],

在我这边的我的项目中,下面三个图标文件都是像 VSC 那种有一圈通明边的文件,但我发现到了 Windows 平台,任务栏的图标显示很小(最初一个):

和右边 Brave 浏览器比照下,显得更小。一开始我认为 Windows PWA 图标取的是下面的 icons,所以我把logo64.pnglogo192.pnglogo512.png 的图标都去掉了通明白边,发现到了 Windows 这边还是不行。

我最初才发现:原来 Windows(只测试了 win7)PWA 利用在任务栏(包含桌面上)的图标取的是网页的 favicon.ico,而 macOS 平台取的是manifest.icons 里的图标,真是坑。

退出移动版