1

我的 index.html 文件中有这个:

<!-- WEB SEARCH META TAGS -->
    <meta charset="utf-8">
    <meta name="robots" content="index,follow" />
    <meta name="keywords" content="surfboards,surfboard,shaper,surfing,app,boards,board" />
    <meta name="description" content="" />
    <meta name="author" content="BoardLine Cie">
    <link rel="shortcut icon" href="images/apple-touch-icon-57x57-precomposed.png" />

    <!-- SAFARI WEB APP META TAGS -->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-title" content="BoardLine">
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <!-- CSS-->
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

    <!-- iPhone + Android -->
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon.png"/>
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image320x460.png">
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57x57-precomposed.png" />

    <!-- iPhone (Retina) -->
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x920.png">

    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x1096.png">

    <!-- iPad -->
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image768x1004.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image748x1024.png">

    <!-- iPad (Retina) -->
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
    <link href="img/splash/ios/splash1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)    and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <link href="img/splash/ios/splash1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

这些文件位于根文件夹中,其访问权限受 .htaccess 限制(用于测试目的)。

所有 png 文件都具有文件名中指示的像素尺寸。

但是android(在我的情况下是4.1.2)一直使用标准图标作为主屏幕快捷方式(橙色图片)......在iphone4上也不起作用。

你能帮我找出问题所在吗?

谢谢

4

2 回答 2

1

rel="apple-touch-icon"自 Chrome 33起已弃用,rel="shortcut icon"但仍受支持。

在您的示例中,您两者都有,所以它应该可以工作。但是,某些 Android 设备上的股票浏览器似乎无法在主屏幕上使用自定义图标。

我在装有 Android 4.3 的三星 Galaxy Note 3 上也有同样的体验。Chrome 将使用自定义图标,但普通浏览器将仅使用该橙色通用图标。

我的三星 Galaxy Note 3 上的 Chrome 用户代理是:

"Mozilla/5.0 (Linux; Android 4.3; SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.136 Mobile Safari/537.36"

股票浏览器的用户代理是:

"Mozilla/5.0 (Linux; Android 4.3; nb-no; SAMSUNG SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36"

哪个看起来是三星打包的旧版 Chrome (v28)?如果 Chrome 在 v31 之前不支持自定义主屏幕图标,那可能可以解释为什么它不起作用。

于 2014-03-09T11:25:49.600 回答
1

Google 似乎不再支持 apple-touch-icon 语法。

于 2013-11-06T13:44:58.610 回答