适用于 android 和 ios 的不同 Web 应用程序图标答案

【问题标题】：Different web app icons for android and ios适用于 android 和 ios 的不同 Web 应用程序图标
【发布时间】：2012-09-29 00:47:48
【问题描述】：

据我所知，两个操作系统都支持 2 个元标记，即：

<link rel="apple-touch-icon" href="#"/>
<link rel="apple-touch-icon-precomposed" href="#"/>

我想要 2 个不同的图标，一个用于 androids，一个用于 IOS 设备。除了使用复杂的移动检测脚本之外，还有什么方法可以实现这一点？我找不到任何标签，但也许只有其中一个支持的标签？

【问题讨论】：

标签： android html ios web-applications

【解决方案1】：

这必须在服务器端完成。

有不同的解决方案，您可以将您的 sn-p 替换为其中之一。如果使用 PHP，则必须将 html 文件的文件扩展名更改为 .php

SSI

如果您的服务器支持 SSI（ServerSide Includes），您可以这样做：

<!--#if expr="$HTTP_USER_AGENT=/Android/" -->
<!--
<link rel="apple-touch-icon" href="androidimg"/>
<link rel="apple-touch-icon-precomposed" href="androidimg"/>
-->
<!--#else -->
<!--
<link rel="apple-touch-icon" href="altimg"/>
<link rel="apple-touch-icon-precomposed" href="altimg"/>
-->
<!--#endif -->

PHP

如果你使用 PHP

<?
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match(/'Android'/, $ua) : 
?>
    <link rel="apple-touch-icon" href="androidimg"/>
    <link rel="apple-touch-icon-precomposed" href="androidimg"/>
<? else: ?>
    <link rel="apple-touch-icon" href="altimg"/>
    <link rel="apple-touch-icon-precomposed" href="altimg"/>
<? endif; ?>

【讨论】：