Question

我在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。

你能帮我弄清楚出了什么问题吗？

感谢

Answer 1

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

Answer 2

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

在你的例子中，你有两个，所以它应该工作。但是，看起来某些Android设备上的股票浏览器无法在主屏幕上使用自定义图标。

我在使用Android 4.3的三星Galaxy Note 3上体验了相同的效果。 Chrome将使用自定义图标，但股票浏览器将仅使用该橙色通用图标。

Samsung 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之前不支持自定义主屏幕图标，则可以解释为什么它不起作用。

主屏幕上的android，web app图标而不是通用图标，apple touche图标：apple-touch-icon-precomposed

2 个答案: