配置的Android Web應用程序

Question

iPhone Web應用程序有四個configuration features可用（不包括HTML5應用程序緩存）來配置網頁的行爲方式，當你保存網頁到主屏幕爲書籤。

1. 您可以指定主頁圖標。
2. 您可以指定當加載網頁時顯示開機畫面。
3. 您可以隱藏瀏覽器UI。
4. 您可以更改狀態欄顏色。

四個功能的工作通過添加標記到<頭>這樣的：

<link rel="apple-touch-icon" href="/custom_icon.png"/> 
<link rel="apple-touch-startup-image" href="/startup.png"> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

當然，所有這些「Apple蘋果」特定標籤的做Android的東西。但是有什麼辦法可以做同樣的事情嗎？ [至少，我希望用戶能夠在我的網頁添加到他們的Android主屏幕（例如，在安卓2.0），並有一個漂亮的高分辨率圖標]

Answer 1

這是一個過時的問題，因爲這樣的答案已經改變。 Chrome在較新的Android上有它自己的meta標籤。 確保您添加到主屏幕，並從主屏幕啓動。 普通書籤不夠用。 Chrome目前使用一些蘋果指令，但底部的三個是android魔術。

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="apple-touch-startup-image" href="startup.png"> 
<link rel="apple-touch-icon" href="youricon.png"/> 
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png"> 

<meta name="mobile-web-app-capable" content="yes"> 
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png"> 
<link rel="shortcut icon" sizes="128x128" href="youricon.png"> 

Answer 2

當您創建的主屏幕上的快捷方式到書籤，Android將使用apple-touch-icon-precomposed如果存在（但不是apple-touch-icon）作爲一個高分辨率圖標：

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/> 

至於特徵的休息，我不認爲有任何的方式在做這個目前未發佈可充當您網站封裝的Android應用程序。

Answer 3

這可能會感興趣的讀者：

http://code.google.com/p/android/issues/detail?id=7657

在2.1 UPDATE1，對Droid的，和我相信其他2 *操作系統的手機，添加書籤到主屏幕時，如果鏈接rel =「apple-touch-icon」或apple-touch-icon-precomposed具有FULL url路徑，則主屏幕僅顯示自定義圖標。

Answer 4

我嘗試了上面從我的三星Galaxy S1

並沒有爲我工作...但沒有工作首先創建一個書籤，然後補充說，書籤作爲快捷方式我的家。這樣做會導致使用正確的圖標。

Answer 5

有跡象表明，我們可以用它來實現可能的最好的結果不同的meta元素：

1A）首先，我們需要設置視口爲我們的應用程序是這樣：
<meta name="viewport" content="width=device-width, initial-scale=1">

1b）這裏有一個小黑客，對於屏幕較高的設備（例如iPhone 5）：
<meta name="viewport" content="initial-scale=1.0">
只要把它放在另一個元，它會做所有的魔術。

2）現在我們已經掌握了基本知識，我們會告訴移動瀏覽器「閱讀」我們的網站，就像它是一個應用程序一樣。主要有兩個meta元素：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
這將使我們的網站，在全屏幕模式和風格的默認狀態欄打開。

3）我們完成了「行爲」meta元素，現在讓我們開始使用我們的圖標。圖標和代碼行的數量將完全取決於您。對於啓動映像，我最好爲每個分辨率創建一個圖標，以便我的「加載程序」在所有設備（主要是Apple設備）上的行爲相同。 我是這樣做的：

*<!--iPhone 3GS, 2011 iPod Touc-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br> 

*<!--iPhone 4, 4S and 2011 iPod Touch-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">` <br> 

*<!--iPhone 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">` <br> 

*<!--iPad landscape-->* <br> 
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"> <br> 

*<!--iPad Portrait-->* <br> 
`<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">` <br> <br> 

注意：格式必須是PNG和所有的大小必須得到尊重，否則將無法正常工作。

4）要完成，我們還需要爲我們的應用程序一些圖標。該圖標將顯示在設備菜單上。以下是我做的：

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br> 
`<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br> 

*<!--1st generation iPad, iPad 2 and iPad mini-->* <br> 
`<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br> 

*<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br> 

*<!--iPad 3rd and 4th generation-->* <br> 
`<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br> 

注意：您還可以使用「預組合」爲你的圖標不與iOS反射光澤顯示。只需添加這個詞，可以定義相對像這樣：
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

至於說，這個工程更好地在蘋果設備。但應用程序圖標已在Android設備上得到驗證，並且適用於。