64

iPhone Webアプリには、Webページをブックマークとしてホーム画面に保存するときのWebページの動作を構成するために使用できる4つの構成機能（HTML5アプリケーションキャッシュを除く）があります。

  1. ホームページアイコンを指定できます。
  2. Webページの読み込み中に表示されるスタートアップイメージを指定できます。
  3. ブラウザのUIを非表示にすることができます。
  4. ステータスバーの色を変更できます。

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など）に追加して、かなり高解像度のアイコンを表示できるようにしたいと考えています。]

4

5 に答える 5

45

ホーム画面にブックマークへのショートカットを作成すると、Androidは高解像度アイコンとして存在するapple-touch-icon-precomposed場合（ただし存在しない場合）を使用します。apple-touch-icon

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

残りの機能については、ウェブサイトのラッパーとして機能するAndroidアプリを公開せずに、現時点でこれを行う方法はないと思います。

于 2009-12-23T08:43:50.500 に答える
28

答えが変わったので、これは時代遅れの質問です。新しい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">
于 2013-11-27T22:33:42.593 に答える
22

これは読者の興味を引くかもしれません：

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

2.1-update1では、Droidで、他の2. * OS電話を想定しています。ホーム画面にブックマークを追加すると、リンクrel = "apple-touch-icon"またはapple-touchの場合にのみ、ホーム画面にカスタムアイコンが表示されます。 -icon-precomposedにはフルURLパスがあります。

于 2010-10-04T21:16:25.370 に答える
2

私はサムスンギャラクシーS1から上記を試しました

私にはうまくいきませんでした...しかし、うまくいったのは、最初にブックマークを作成し、次にそのブックマークを私の家へのショートカットとして追加することでした。これを行うと、正しいアイコンが使用されました。

于 2011-10-20T15:14:04.583 に答える
2

可能な限り最高の結果を達成するために使用できるさまざまなメタ要素があります。

  1. まず、アプリのビューポートを次のように設定する必要があります。

    <meta name="viewport" content="width=device-width, initial-scale=1">

    画面が高いデバイス（iPhone 5など）の場合、ここに少しハックがあります。

    <meta name="viewport" content="initial-scale=1.0">

    他のメタの下に置くだけで、すべての魔法が実行されます。

  2. 基本がわかったので、モバイルブラウザにウェブサイトをアプリのように「読む」ように指示します。2つの主要なメタ要素があります。

    <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    これにより、当社のWebサイトが全画面モードで開き、デフォルトのステータスバーのスタイルが設定されます。

  3. 「動作する」メタ要素はこれで完了です。次に、アイコンから始めましょう。アイコンとコード行の数は完全にあなた次第です。スタートアップイメージでは、解像度ごとに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である必要があり、すべてのサイズを尊重する必要があります。そうでない場合、機能しません。

  4. 最後に、アプリのアイコンもいくつか必要になります。このアイコンはデバイスメニューに表示されます。これが私がそれをした方法です：

    <!--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を次のように定義する場所にこの単語を追加するだけです。

    <link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

すでに述べたように、これはAppleデバイスでより適切に機能します。しかし、アプリのアイコンはAndroidデバイスで証明されており、機能します。

于 2014-11-18T14:18:20.263 に答える