Apple触控图标未显示在主屏幕上

Question

我正在使用以下代码来获取移动设备的触摸图标 - 它基于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)的主屏幕上.我已经尝试将他们的代码,文件夹结构和图标复制到我自己的网站中,但这不起作用.

有任何想法吗？

Answer 1

我有同样的问题.解决方案是删除网站上的密码保护.

Answer 2

我在其他两个网站上放了相同的页面和图标,它工作得很好,所以我想也许可能是因为我正在处理的原始两个测试服务器都受密码保护 - 虽然显然我输入了浏览页面的凭据,所以不完全确定为什么会出现这个问题.但是,结果似乎表明情况就是这样.

Answer 3

在Apple Safari Web内容指南中,他们建议将图标放在"根文档文件夹"中.

要指定整个网站的图标(网站上的每个页面),请将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

希望其他人可以验证这一点.

Answer 4

我有同样的问题,问题的根源是我有一个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

这应该解决问题.

干杯!!