2012-07-11 62 views
2

我曾經遇到過在Android股票瀏覽器和移動瀏覽器一個奇怪的事情(錯誤?),都在Android 4.0.3 ICS/4安裝(我都測試)。從可靠的消息來源,我聽說Android 2.3上出現了同樣的問題。Android瀏覽器沒有蘋果觸摸圖標預組成

我想達到的目標: 我最近加入了蘋果觸摸圖標,圖標預組成環節,它可以用來做我的移動網站看起來像一個應用程序,如果保存到主屏幕。我還添加了書籤泡泡以通知用戶他們現在可以將我的移動網站保存爲「應用程序」。當然,我不想讓任何人在他們的主屏幕上從他們的應用程序書籤中打開我的網站,所以我爲沒有散列的任何人加載一個特殊的散列。這樣,當他們保存我的網站時,他們會用散列保存,因此我可以檢查他們是否通過正常鏈接my.website.com/或通過他們的書籤my.website.com/#specialhash打開了我的網站。我簡化整個過程通過使用真棒庫吧:https://github.com/okamototk/jqm-mobile-bookmark-bubble

問題: 但是,在Android上,每當我通過JS改變散,瀏覽器/操作系統將無法識別蘋果觸摸-icon-precomposed圖標鏈接,只保存常規favicon.ico(看起來很可怕,根本不像應用程序)。

是他們的事情我可以做什麼?

PS。在Mobile Chrome中,正確的Apple-touch-icon-precomposed會保存到書籤庫中,但無論何時我都會將其保存到主屏幕中。

回答

2

這是手機瀏覽器的問題。請參閱this bug。試驗,看來使用apple-touch-icon在書籤庫中保存它,使得它當添加到主屏幕頁面上的一個小圖標,但使用apple-touch-icon-precomposed不使其在主屏幕上在所有 - 我得到一個地球一個頁面上圖標。除了通過股票瀏覽器添加書籤,並使用庫存書籤小部件將其添加到主屏幕之外,目前沒有任何事情可以執行。 Chrome書籤和小部件已被分解爲這些圖標。

+0

感謝您回答並確認問題! – 2012-09-05 10:55:42

0

此解決方案適用於Android默認瀏覽器。

看來,哈希變化之後,在Android默認瀏覽器無法瞭解該書籤鏈接,也許是因爲它已不認識的URL。我發現,如果書籤圖像鏈接標記在哈希更改後通過JavaScript插入到DOM中,並且在本例中爲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)); 
    } 
    } 
};