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

Question

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

<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 链接的打开选项失败“因为地址无效”。

对于我的网站，我想包括我的电子邮件和电话详细信息，能够直接邮寄/打电话，或将其添加到联系人中。我在这里发现了一个相关且 Unresolved 问题: Dial a number using Phonegap in IPhone

如有任何帮助，我们将不胜感激。

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

<meta name="apple-mobile-web-app-capable" content="yes" />

任何人都可以使用上面的链接重现此行为，并知道哪些版本的 iOS 可能受到影响吗？我在 iPodTouch iOS 5.0.1 和 iPad iOS 4.3.3 上测试过它。谢谢。

Answer 1

我注意到了同样的问题。为了解决这个问题，我使用了 CSS background-image 而不是 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>

请注意，我特意在 a 标记内留下了 no 空格，否则 iPhone 会将其显示在图像旁边(对我来说它显示为空下划线，但这取决于你自己的 CSS)。