34

次のコードを使用して、モバイル デバイスのタッチ アイコンを取得しています。これは、html5boilerplate/mobile の例に基づいています。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/img/touch/l/apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/apple-touch-icon.png">

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

しかし、何らかの理由で、iPhone は依然としてホーム画面のアイコンに問題を抱えています。私が得るのは、その迷惑なスクリーンショットのアイコンだけです。

機能しない理由を明らかにするために、他のメタ タグをここに含めました。タグを並べてみました。

アイコンの使用を止める可能性のある何かを考えられる人はいますか?

テスト ケースとして html5boilerplate/mobile を使用しました。サイトを参照して、iPhone (4S iOS5) のホーム画面にアイコンを追加できます。コード、フォルダー構造、アイコンを自分のサイトにコピーしようとしましたが、うまくいきませんでした。

何か案は？

4

7 に答える 7

77

私も同じ問題を抱えていました。解決策は、Web サイトのパスワード保護を解除することです。

于 2011-12-31T19:07:30.130 に答える
14

他の 2 つのサイトに同じページとアイコンを配置したところ、完全に機能しました。おそらく、私が作業していた元の 2 つのテスト サーバーがパスワードで保護されていたためだと思います。なぜそれが問題になるのか完全にはわかりません。しかし、結果はこれが事実であることを示唆しているようです。

于 2011-10-26T04:31:16.357 に答える
7

私はまったく同じ問題を抱えていました。問題の原因は、自分のサイトにパスワード保護された htaccess ファイルがあったため、webclip アイコンが機能しないことです。この問題を解決し、パスワード保護を維持するには、このコードを追加する必要があります。 :

SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

そうすれば、パスワードなしでhttp://www.example.com/apple-touch-icon.pngに完全にアクセスできます。

それでも問題が解決しない場合は、完全な htaccess ファイルの例を次に示します。

AuthUserFile /home/mysite/.htpasswds/.htpasswd
AuthType Basic
AuthName "Password Protected"
Require valid-user
SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

これで問題は解決するはずです。

乾杯！！

于 2014-08-31T00:41:44.810 に答える
6

Apple Safari Web コンテンツ ガイドでは、アイコンを「ルート ドキュメント フォルダ」に配置することを提案しています。

Web サイト全体 (Web サイトのすべてのページ) のアイコンを指定するには、apple-touch-icon.png または apple-touch-icon-precomposed.png という名前のルート ドキュメント フォルダーに PNG 形式のアイコン ファイルを配置します。

これを試してみましたが、最終的にアイコンを「img」フォルダーに移動してそこにリンクするまで機能しませんでした。

ただし、html5boilerplate アイコンが機能し、あなたのアイコンが機能しなかった理由は、次のような仮想ディレクトリを使用しているためだと思います。

http://localhost/myvirtualdirectory/apple-touch-icon.png

iOS のデフォルトの動作では、仮想ディレクトリからホストしている場合でもルート ドメインを参照します。

http://localhost/apple-touch-icon.png

他の人がこれを確認できることを願っています。

于 2012-07-08T16:31:04.983 に答える
1

サイトがパスワードで保護されていなくても、アイコンが ui/img フォルダーにあるときに同じ問題が発生しました。それらをルートフォルダーに移動した後（およびキャッシュをクリアした後）、機能し始めました。

于 2014-03-07T10:01:14.677 に答える
-1

iPhone の [設定] -> [Safari] で [履歴と Web サイトのデータを消去] を選択し、ホームページに追加してみるまで、これを機能させることができませんでした。

于 2016-01-31T22:06:07.710 に答える