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" />

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

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

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

我刚刚在另一部从未访问该网站的iPhone上再次尝试，但它无法使用。

这是在＆＃34; SharePoint Online / O365＆＃34;现场。什么可能导致这种疯狂的想法？

Answer 1

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

作为这种意外观察的假设：也许Safari并不急于处理Touch图标（毕竟，与HTML，CSS和其他资源不同，Touch图标不需要显示页面）所以＆＃39 ;在您打开页面后短暂添加到主屏幕时，s不可用。而且因为您想测试添加到主屏幕功能，您可能会访问您的网站并立即将其添加到主屏幕。我认为，这不是常规方案（访问者在为网站添加书签之前至少花费了几秒钟。）

Web Clip / Apple Touch图标显示问题

1 个答案: