Значок Apple touch не отображается на главном экране

Я использую следующий код для получения значков касания для мобильных устройств - он основан на примере 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). Я попытался скопировать их код, структуру папок и значки на свой сайт, но это не сработало.

какие идеи?

27
apple-touch-icon html ios5 iphone

6 ответов

У меня была та же проблема. Решение-удалить защиту паролем на сайте.

64

Я поставил ту же страницу и значок на двух других сайтах, и он работал отлично, поэтому я думаю, что это может быть потому, что исходные два тестовых сервера, над которыми я работал, были защищены паролем - хотя, очевидно, я ввел учетные данные для просмотра страницы, поэтому не совсем уверен, почему это будет проблемой. Однако, судя по результатам, так оно и было.

12

в Apple Руководство По Веб-Контенту Safari они предлагают поместить значки в"корневую папку документа".

чтобы указать значок для сайта (каждая страница на сайте), поместите файл значков в формате PNG в корневую папку с именем apple-touch-иконка.png или apple-touch-значок-предварительно составленный.формат PNG.

я попробовал это, и это не сработает, пока я, наконец, не переместил значки в папку " img " и не связался с ними там.

однако я подозреваю, что причина, по которой значок html5boilerplate работал, а ваш-нет, заключалась в том, что вы используете виртуальный каталог, такой как:

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

в то время как поведение iOS по умолчанию-смотреть на корневой домен, даже когда вы размещаете из виртуального каталога:

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

надеюсь, другие смогут это проверить.

6

у меня была та же проблема, и источник проблемы в том, что у меня был файл 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

Это должно решить проблему.

Ура!!

5

У меня была такая же проблема, когда мои значки были в моей папке ui/img, хотя мой сайт не был защищен паролем. После перемещения их в мою корневую папку (и очистки кэша) он начал работать.

1

Я не мог заставить это работать, пока я не пошел на свой iPhone в настройках - > Safari, а затем "очистить историю и данные веб-сайта", а затем попытаться добавить его на мою домашнюю страницу.

-1