2013-11-14 35 views
3

我決定更改我的iOS網絡應用程序圖標。正確的iOS網絡剪輯集成(網絡應用程序圖標)

這是我用來連接我的圖標的方式:

<!-- iOS 7 iPad (retina) --> 
<link href="/assets/img/misc/ios/apple-touch-icon-152x152-precomposed.png" 
       sizes="152x152" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 6 iPad (retina) --> 
<link href="/assets/img/misc/ios/apple-touch-icon-144x144-precomposed.png" 
       sizes="144x144" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 7 iPhone (retina) --> 
<link href="/assets/img/misc/ios/apple-touch-icon-120x120-precomposed.png" 
       sizes="120x120" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 6 iPhone (retina) --> 
<link href="/assets/img/misc/ios/apple-touch-icon-114x114-precomposed.png" 
       sizes="114x114" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 7 iPad --> 
<link href="/assets/img/misc/ios/apple-touch-icon-76x76-precomposed.png" 
       sizes="76x76" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 6 iPad --> 
<link href="/assets/img/misc/ios/apple-touch-icon-72x72-precomposed.png" 
       sizes="72x72" 
       rel="apple-touch-icon-precomposed"> 

<!-- iOS 6 iPhone --> 
<link href="/assets/img/misc/ios/apple-touch-icon-57x57" 
       sizes="57x57" 
       rel="apple-touch-icon-precomposed"> 

,這是方法,我發現:

<link rel="apple-touch-icon" href="/assets/img/misc/ios/icon.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/misc/ios/icon-72.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/misc/ios/[email protected]" /> 
<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/misc/ios/[email protected]" /> 

但是新的方法,當我測試它不工作在我所以我想知道什麼是使IOS6 & IOS7的Web應用程序圖標出現絕對正確的方式?

回答

1

documentation

要指定不同裝置的多個圖標的分辨率,例如,同時支持iPhone和iPad設備添加了一個尺寸屬性到每個鏈接件如下:

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 

使用最適合設備尺寸的圖標。如果沒有設置大小屬性,則元素的大小默認爲60 x 60.

所以技術上你的新方法應該沒問題。請注意,文檔列出了iOS 7的尺寸。如果您擁有所有正確的尺寸,則會專門使用它們。

如果你不具備所有正確的尺寸,

最小的圖標比推薦的大小時使用。如果沒有圖標大於建議的尺寸,則使用最大的圖標。

這意味着你可以只包含iOS 7的尺寸。我沒有看到任何理由爲添加或刪除舊圖標付出額外的努力。但如果質量要求,請爲所有版本的iOS包含正確的大小。

如果在網站根目錄中搜索與蘋果觸摸圖標...前綴圖標的HTML

使用鏈接元素指定沒有圖標。例如,如果該設備的適當的圖標的大小是60×60,則系統搜索以下列順序文件名:

蘋果觸摸圖標-76x76.png

蘋果觸摸的icon.png

所以你實際上並不使用鏈接元素或者只要你正確地命名您的文件並將其放置在根目錄下。

這是鏈接到蘋果的文檔Specifying a Webpage Icon for Web Clip