Web Clip/Apple 触摸图标显示问题

Question

我很难让 apple touch 图标在某些设备上始终如一地工作。

有问题的设备通常是 iPhones，我相信它们是 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" />

我得到了 iPhone 6S 进行测试，因为我无法在我的 android 设备上重现该问题。我能够复制这个问题，所以我从上面添加了这一行：

<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图标并不需要显示页面），因此当您在打开页面后不久添加到主屏幕时它不可用。因为您想测试“添加到主屏幕”功能，您可能访问了您的网站并立即将其添加到主屏幕。我想这不是常规情况（访问者至少要花几秒钟才能为网站添加书签）。

Web Clip/Apple 触摸图标显示问题

Web Clip/Apple Touch Icon display issues

iphone

sharepoint-online

apple-touch-icon

web-clips