Question

我遇到使用图片而不是纯文本作为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链接，这是新消息/添加到联系人/复制/取消，对于电话链接，它是呼叫/添加到联系人/复制/取消。使用图像链接，弹出窗口为mailto和tel链接提供打开/保存图像/复制/取消选项，其中打开选项未通过电话链接“因为地址无效”。

对于我的网站，我希望包含我的电子邮件和电话详细信息，可以直接邮寄/致电，或将其添加到联系人。我在这里找到了一个相关且未解决的问题： 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）。

Answer 2

我无法在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>

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

图形上的“触摸并按住”显示“在电话中打开”，“保存图像”和“复制”;触摸打开电话会打开电话对话框，再次使用取消和通话选项。

我能够重现您的体验的唯一方法是通过错误输入协议指示符。例如，这会再现您提到的所有内容（请注意href中的1而不是小写的L）：

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

您是否肯定该链接没有错误输入或其他问题？

如何在iOS上使用图片而不是纯文本作为移动Safari的链接？

2 个答案: