Web Clip / Apple Touch图标显示问题

Question

我在某些设备上无法正常使用苹果触摸图标时遇到困难。

有问题的设备通常是iPhone，我相信它们是6S。 我的图标设置如下：

<link rel="icon" sizes="180x180" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />
<link rel="apple-touch-icon" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-57x57.png" />

由于无法在Android设备上重现该问题，因此我获得了iPhone 6S进行测试。 我能够复制该问题，因此我从上方添加了以下行：

<link rel="apple-touch-icon" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />

当我刷新测试设备上的浏览器时，添加到主屏幕后，图标开始显示。

我只是在另一台从未访问过该网站且无法正常工作的iPhone上再次尝试。

该网站位于“ SharePoint Online / O365”网站上。 关于可能导致这种疯狂的想法？

Answer 1

iOS Safari关于“触摸”图标和“添加到主屏幕”的行为通常不一致。 我建议您使用无法正常工作的iPhone重试几次。 有可能：最终将考虑图标。 绝对不是您期望的答案...

作为这种意外观察的假设：也许Safari并不急于处理Touch图标（毕竟，与HTML，CSS和其他资源不同，不需要Touch图标来显示页面），因此添加时不可用打开页面后不久返回主屏幕。 并且由于您想测试“添加到主屏幕”功能，因此您可能访问了您的站点并将其立即添加到主屏幕。 我想这不是正常的情况（访问者在为站点添加书签之前花了至少几秒钟的时间）。