webentwicklung-frage-antwort-db.com.de

Das Apple-Touch-Symbol wird auf dem Startbildschirm nicht angezeigt

Ich verwende den folgenden Code, um Berührungssymbole für mobile Geräte abzurufen - er basiert auf dem Beispiel 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">

Aber aus irgendeinem Grund gibt mir das iPhone immer noch Probleme mit dem Startbildschirm-Symbol. Alles was ich bekomme ist das nervige Screenshot-Icon.

Ich habe hier die anderen Meta-Tags eingefügt, für den Fall, dass sie ein Licht auf die Frage werfen, warum es nicht funktioniert. Ich habe versucht, die Tags neu zu ordnen. 

Kann sich irgendjemand etwas einfallen lassen, das die Verwendung der Icons verhindern könnte? 

Ich habe html5boilerplate/mobile als Testfall verwendet. Ich kann zu ihrer Website navigieren und das Symbol zum Startbildschirm auf meinem iPhone hinzufügen (4S iOS5). Ich habe versucht, den Code, die Ordnerstruktur und die Symbole in meine eigene Site zu kopieren. Dies funktionierte jedoch nicht. 

Irgendwelche Ideen?

27
gpr

Ich habe die gleiche Seite und das gleiche Symbol auf zwei anderen Websites platziert und es hat perfekt funktioniert. Ich denke, es könnte daran liegen, dass die beiden ursprünglichen Testserver, an denen ich arbeitete, durch ein Passwort geschützt waren - obwohl ich offensichtlich die Anmeldeinformationen eingegeben hatte, um die Seite zu durchsuchen. also nicht ganz sicher, warum das ein problem wäre. Die Ergebnisse scheinen jedoch darauf hinzudeuten, dass dies der Fall war.

12
gpr

Ich hatte das gleiche Problem. Die Lösung besteht darin, den Passwortschutz auf der Website zu entfernen.

64
Ccx

Im Apple Safari Web Content Guide schlagen sie vor, die Symbole im "Root Document Folder" abzulegen. 

Um ein Symbol für die gesamte Website (jede Seite der Website) anzugeben, Platzieren Sie eine Symboldatei im PNG-Format im Stammdokumentordner mit dem Namen Apple-touch-icon.png oder Apple-touch-icon-precomposed.png.

Ich habe dies versucht und es würde nicht funktionieren, bis ich die Icons schließlich in einen 'img'-Ordner verschoben und dort verlinkt habe.

Ich vermute jedoch, dass das html5boilerplate-Symbol funktionierte und dass es nicht so war, weil Sie ein virtuelles Verzeichnis wie

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

das Standardverhalten von iOS besteht darin, die Stammdomäne auch dann zu betrachten, wenn Sie aus dem virtuellen Verzeichnis heraus hosten:

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

Hoffentlich konnten andere das bestätigen.

6
Chad Pavliska

Ich hatte das gleiche Problem, und die Ursache des Problems war, dass ich eine Htaccess-Datei mit Kennwortschutz für meine Website hatte. Das Webclip-Symbol funktioniert daher nicht. Um dieses Problem zu lösen, muss der Kennwortschutz jedoch hinzugefügt werden :

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

Auf diese Weise haben Sie vollen Zugriff auf http://www.example.com/Apple-touch-icon.png , ohne dass Sie ein Kennwort benötigen.

Wenn Sie immer noch Probleme haben, finden Sie hier ein Beispiel mit der vollständigen htaccess-Datei:

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

Das sollte das Problem beheben.

Prost!!

5
innovaciones

Ich hatte das gleiche Problem, als sich meine Icons in meinem ui/img-Ordner befanden, obwohl meine Site nicht durch ein Passwort geschützt war. Nachdem ich sie in meinen Stammordner verschoben und den Cache geleert hatte, fing es an zu arbeiten. 

1
patad

Das Platzieren eines Symbols auf dem externen Bildhosting und das Hinzufügen der URL als Wert von "href" hat für mich als Charme gewirkt.

0
Artem Mishukov