Android Webアプリケーションの設定
iPhone Webアプリには、Webページをホーム画面にブックマークとして保存するときのWebページの動作を構成する4つの 構成機能 があります（HTML5アプリケーションキャッシュは含まれません）。
- ホームページのアイコンを指定できます。
- Webページのロード中に表示されるスタートアップイメージを指定できます。
- ブラウザUIを非表示にすることができます。
- ステータスバーの色を変更できます。
4つの機能は、次のように<head>にタグを追加することで機能します。
<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で何もしません。しかし、同等のことを行う方法はありますか？ [少なくとも、ユーザーが自分のWebページをAndroidホーム画面（たとえば、Android 2.0）に追加して、 -resアイコン。]
回答が変更されたため、これは日付のある質問です。新しいAndroidのChromeには、このための独自のメタタグがあります。必ずホームスクリーンに追加し、ホームスクリーンから起動してください。通常のブックマークでは不十分です。 Chromeは現在、いくつかのAppleディレクティブを使用していますが、下の3つは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">
ホーム画面にブックマークへのショートカットを作成すると、AndroidはApple-touch-icon-precomposed存在する場合（ただしApple-touch-icon）高解像度アイコンとして：
<link rel="Apple-touch-icon-precomposed" href="/custom_icon.png"/>
残りの機能については、ウェブサイトのラッパーとして機能するAndroidアプリを公開せずにこれを行う方法は現時点ではないと思います。
これは読者にとって興味深いかもしれません：
http://code.google.com/p/Android/issues/detail?id=7657
Droidの2.1-update1では、ホーム画面にブックマークを追加するときに、リンクrel = "Apple-touch-icon"またはApple-touchの場合にのみホーム画面にカスタムアイコンが表示されます。 -icon-precomposedには完全なURLパスがあります。
私はサムスンギャラクシーS1から上記を試しました
私にはうまくいきませんでした...しかし、うまくいったのは、最初にブックマークを作成してから、そのブックマークを自宅へのショートカットとして追加することでした。これを行うと、正しいアイコンが使用されました。
可能な限り最高の結果を達成するために使用できるさまざまなメタ要素があります。
まず、アプリのビューポートを次のように設定する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">背の高い画面を備えたデバイス（iPhone 5など）には、ここで少しハックがあります：
<meta name="viewport" content="initial-scale=1.0">他のメタの下に置くだけで、すべての魔法が実行されます。
基本ができたので、モバイルブラウザにWebサイトをアプリのように "読む"ように伝えます。 2つの主要なメタ要素があります。
<meta name="Apple-mobile-web-app-capable" content="yes"> <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">これにより、当社のWebサイトが全画面モードで開かれ、デフォルトのステータスバーのスタイルが設定されます。
メタ要素の「振る舞い」は完了しました。アイコンから始めましょう。アイコンとコード行の量はあなた次第です。スタートアップイメージについては、解像度ごとに1つのアイコンを作成し、「ローダー」がすべてのデバイス（主にAppleデバイス）で同じように機能するようにします。
<!--iPhone 3GS, 2011 iPod Touch--> <link rel="Apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)"> <!--iPhone 4, 4S and 2011 iPod Touch--> <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)"> <!--iPhone 5 and 2012 iPod Touch--> <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)"> <!--iPad landscape--> <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)"> <!--iPad Portrait--> <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)">注：形式はPNGでなければならず、すべてのサイズを尊重する必要があります。そうしないと機能しません。
最後に、アプリ用のアイコンもいくつか必要になります。このアイコンは、デバイスメニューに表示されます。以下がその方法です。
<!--iPhone 3GS, 2011 iPod Touch and older Android devices--> <link rel="Apple-touch-icon" href="../images/mobile-icon-57.png"> <!--1st generation iPad, iPad 2 and iPad mini--> <link rel="Apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png"> <!--iPhone 4, 4S, 5 and 2012 iPod Touch--> <link rel="Apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png"> <!--iPad 3rd and 4th generation--> <link rel="Apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">注：アイコンをiOSの反射性の輝きで表示しないようにするには、「合成済み」を使用することもできます。 relを定義する場所にこのWordを追加してください：
<link rel="Apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
前述のとおり、これはAppleデバイスで動作します。ただし、アプリアイコンはAndroidデバイスで動作し、動作します。