0

我很难让苹果触摸图标在某些设备上始终如一地工作。

有问题的设备通常是 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" />

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

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

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

我刚刚在另一部从未访问过该网站的 iPhone 上再次尝试，但它无法正常工作。

这是在“SharePoint Online/O365”站点上。关于什么可能导致这种疯狂的想法？

4

1 回答 1

1

iOS Safari 通常在触摸图标和添加到主屏幕方面的行为不一致。我建议您使用不起作用的 iPhone 重试几次。机会是：它最终会考虑到图标。绝对不是你预期的答案...

作为这个意外观察的假设：可能 Safari 并不急于处理 Touch 图标（毕竟与 HTML、CSS 和其他资源不同，Touch 图标不是显示页面所必需的）所以在添加时它不可用打开页面后很快回到主屏幕。而且因为您想测试添加到主屏幕功能，您可能访问了您的站点并立即将其添加到主屏幕。我想这不是常规情况（访问者在为网站添加书签之前至少花费几秒钟）。

于 2016-01-12T23:37:07.773 回答