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圖標來顯示頁面），因此添加時不可用打開頁面后不久返回主屏幕。 並且由於您想測試“添加到主屏幕”功能，因此您可能訪問了您的站點並將其立即添加到主屏幕。 我想這不是正常的情況（訪問者在為站點添加書簽之前花了至少幾秒鍾的時間）。