我很难让apple touch图标在某些设备上持续工作。
有问题的设备通常是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上再试了一次,但它不起作用。
这是在"SharePoint Online/O365"网站上。关于是什么导致了这种疯狂的想法?
iOS Safari在触摸图标和添加到主屏幕方面经常存在不一致的行为。我建议你用不起作用的iPhone再试几次。机会是:它最终会将图标考虑在内。绝对不是你所期望的答案。。。
作为这一意外观察的一个假设:也许Safari并不急于处理Touch图标(毕竟,与HTML、CSS和其他资源不同,显示页面不需要Touch图标),所以当你打开页面后不久添加到主屏幕时,它就不可用了。因为你想测试"添加到主屏幕"功能,你可能访问了你的网站并立即将其添加到了主屏幕。我想,这不是通常的情况(访问者在为网站添加书签之前至少要花几秒钟的时间)。