如何在iOS上使用图像而不是纯文本作为mobile safari的链接？

在iOS5上使用图像而不是纯文本作为移动Safari的链接时，我遇到了一些问题，在设备上进行了测试。我尝试了三种不同的链路协议，tel:mailto:和http:并在下面分别描述了它们的问题

<a href="tel:1234"><img src="images/phone.jpg" alt="" /></a>

在iOS5中不起作用，它抛出一个无法打开页面错误，但可以使用文本作为链接

<a href="mailto:foo@bar.com"><img src="images/mail.jpg" alt="" /></a>

可以工作并启动邮件应用程序

<a href="http://www.mysite.com"><img src="images/home.jpg" alt="" /></a>

一切正常

然而，与普通文本链接一起弹出的“触摸并保持”事件对图像的效果不同。对于mailto链接，这是新消息/添加到联系人/复制/取消；对于tel链接，这是呼叫/添加到联系人/复制/取消。 对于图像链接，弹出窗口为mailto和tel链接提供打开/保存图像/复制/取消选项，而tel链接的打开选项“因为地址无效”失败

对于我的网站，我希望包括我的电子邮件和电话详细信息，能够直接发送/呼叫，或将其添加到联系人中。我在这里发现了一个相关且未解决的问题：

任何帮助都将不胜感激

奇怪的是，当保存到iOS设备的主屏幕上，并作为web应用程序运行时，触摸并按住手势根本不会导致图像链接弹出，而文本链接工作正常。 （为了使网站能够作为web应用程序运行，我在页面头部添加了以下代码：）

---

任何人都可以通过上面的链接重现这种行为，并知道哪些版本的iOS可能会受到影响？我在iPodTouch iOS 5.0.1和iPadiOS 4.3.3上测试了它。谢谢。

我无法在iOS 5.0.1上重新设置图像链接故障。具体来说，我在apache上的网页中添加了以下内容：

<p>This is a test of a tel link: <a href="tel:2060000000"><img src="/iPodTouch_s4.png"></a></p>

这是对电话链路的测试：

触摸图形将弹出电话对话框，其中包含取消和通话选项

触摸并按住手机中打开的图形，保存图像并复制；触摸手机中的Open（打开）会弹出电话对话框，再次显示Cancel（取消）和Call（通话）选项

我能重现你经验的唯一方法就是错误地输入协议标识符。例如，这会复制您提到的所有内容（注意href中的1而不是小写L）：

这是对电话链路的测试：

---

你确定链接没有打字错误或其他问题吗？

我注意到了同样的问题。为了解决这个问题，我使用了CSS

背景图像

而不是

img

标签：

<style type="text/css">
    .tel { 
        width: 102px; 
        height: 32px; 
        display: inline-block; 
        background: url(phone.png); 
    }
</style>

<a class="phone" href="tel:+1-000-000-0000"><span class="tel"></span></a>

.tel{
宽度：102px；
高度：32px；
显示：内联块；
背景：url（phone.png）；
}

---

请注意，我特别在

a

标记内不留空格，因为否则iPhone会在图像旁边显示它（对我来说，它显示为空下划线，但这取决于您自己的CSS）。

感谢您的回复。这让我考虑了三个可能的原因，因为我的链接失败了。1.（x） html：由于您将img标记编写为html（无结束标记），并且我使用了xhtml，因此我尝试了html中的链接，但看到了与以前相同的行为。2.iDevice：我已经在iPodTouch（5.0.1）和iPad（4.3.3）上试用过。我知道你不能打电话，但通过纯文本链接我可以保存到联系人，而图像链接则不行。你在哪个设备上测试过？3.因为我不在美国，所以我使用的是国际格式，即href=“电话：+4512345678”。但是，当删除“+”时，我会遇到同样的错误。否则，我很确定我没有键入任何错误。事实上，我做了一个小测试，在这里我链接了文本和图像：

如果我点击文本，它会按预期工作，但当我点击图像时它不会，所以我肯定实际的href=“tel:…”部分正在工作。我也有同样的问题。对文本都很好，但对图像无效。

<p>This is a test of a tel link: <a href="te1:2060000000"><img src="/iPodTouch_s4.png"></a></p>

<style type="text/css">
    .tel { 
        width: 102px; 
        height: 32px; 
        display: inline-block; 
        background: url(phone.png); 
    }
</style>

<a class="phone" href="tel:+1-000-000-0000"><span class="tel"></span></a>