Я использую следующий код для получения значков касания для мобильных устройств - он основан на примере 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). Я попытался скопировать их код, структуру папок и значки на свой собственный сайт, но это не сработало.
Любые идеи?
Я разместил одну и ту же страницу и значок на двух других сайтах, и он работал отлично, поэтому я думаю, может быть, это может быть потому, что исходные два тестовых сервера, над которыми я работал, были защищены паролем - хотя, очевидно, я ввел учетные данные для просмотра страницы, поэтому не совсем уверен, почему это будет проблемой. Однако, как представляется, результаты показывают, что это было так.
У меня была та же проблема. Решение состоит в том, чтобы удалить защиту паролем на веб-сайте.
В Apple Руководство по веб-контенту Safari они предлагают помещать значки в "папку корневого документа".
Чтобы указать значок для всего веб-сайта (каждая страница на веб-сайте), поместите файл значка в формате PNG в корневую папку документа, называемую apple-touch-icon.png или apple-touch-icon-precomposed.png.
Я пробовал это, и это не сработало, пока я, наконец, не переместил значки в папку "img" и не привязал их там.
Однако, я подозреваю, что значок html5boilerplate работал, а ваш - нет, потому что вы используете виртуальный каталог, например:
http://localhost/myvirtualdirectory/apple-touch-icon.png
в то время как поведение по умолчанию для iOS по умолчанию заключается в том, чтобы посмотреть на корневой домен, даже если вы размещаете вне виртуального каталога:
http://localhost/apple-touch-icon.png
Надеемся, что другие могут это подтвердить.
У меня была та же самая проблема, и источником проблемы было то, что у меня был файл htaccess с защитой паролем для моего сайта, поэтому значок веб-клипа не будет работать, чтобы решить эту проблему и по-прежнему иметь защиту паролем, добавьте этот код:
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
Это должно устранить проблему.
Ура!!
У меня была такая же проблема, когда мои значки находились в моей папке ui/img, хотя мой сайт не защищен паролем. Переместив их в корневую папку (и очистив кэш), он начал работать.
Размещение иконки на внешнем хостинге изображений и добавление URL-адреса в качестве значения "href" работало для меня как прелесть.
Я не мог заставить это работать, пока я не включил свой iPhone в настройках → Safari, а затем "Очистить историю и данные веб-сайта", а затем попытаюсь добавить его на мою домашнюю страницу.