Question

我在Android股票浏览器和移动Chrome上遇到了一个奇怪的事情（bug？），两者都安装在Android ICS 4.0.3 / 4上（我已经测试了两者）。从可靠的来源我听说同样的问题出现在Android 2.3上。

我想要实现的目标： 我最近添加了apple-touch-icon-precomposed图标链接，如果保存到主屏幕，可用于使我的移动网站看起来像应用程序。我还添加了一个书签气泡，告知用户他们现在可以将我的移动网站保存为“应用程序”。当然，我不想向任何通过主屏幕上的类似应用程序的书签打开我的网站的人展示泡泡，所以我为没有哈希的人添加了一个特殊的哈希值。这样，当他们保存我的网站时，他们会用哈希保存它，因此我可以检查他们是否通过普通链接my.website.com/或通过他们的书签my.website.com/#specialhash打开我的网站。我通过使用一个很棒的库来简化整个过程：https://github.com/okamototk/jqm-mobile-bookmark-bubble

问题： 但是，在Android上，每当我通过JS更改哈希时，浏览器/操作系统将无法识别apple-touch-icon-precomposed图标链接，只保存常规的favicon.ico（看起来很可怕，而且根本不像应用程序）。

我能做什么吗？

PS。在移动Chrome中，正确的apple-touch-icon-precomposed会保存到书签库中，但不会在我尝试将其保存到主屏幕时保存。

Answer 1

移动Chrome是一个问题。见this bug。通过试验，似乎使用apple-touch-icon将其保存在书签库中，并在添加到主屏幕时将其呈现为页面上的小图标，但使用apple-touch-icon-precomposed根本不会在主屏幕上呈现它 - 我在页面图标上有一个地球仪。除了通过股票浏览器添加书签，并使用股票书签小部件将其添加到主屏幕之外，您现在无法做任何事情。这些图标的Chrome书签和小部件已损坏。

Answer 2

此解决方案适用于Android默认浏览器。

似乎在哈希更改后，Android默认浏览器对书签链接感到困惑，可能是因为它不再识别网址。我发现，如果书签图像链接标记在哈希更改后立即插入到DOM中，通过JavaScript，在本例中为jQuery，问题就解决了。这是我用来解决这个问题的解决方法：

// create the bookmark link 
MyObject.prototype.getBookmarkLink = function(imageName)
{
   var html = '';
   if (imageName) {
   html = '<link rel="apple-touch-icon-precomposed" href="' + PathToImages + '/' + imageName + '" />';
   }
   return html; 
};

MyObject.prototype.insertBookmarkImage = function(imageName)
{
   if (imageName) {
     // try to get the link that may already be there
     var existingBookmark = jQuery("link[rel='applfe-touch-icon-precomposed']");
     // if able to find it...
     if (existingBookmark.length) {
        // remove it...
        existingBookmark.remove(); 
        // ... then, put it back 
        jQuery('head').append(existingBookmark);
     } else {
        // we were not able to find it, so add a new one
        jQuery('head').append(this.getBookmarkLink(imageName)); 
     }
   }
};

哈希更改后的Android浏览器没有apple-touch-icon-precomposed

2 个答案: