单击手机网页上的链接时如何触发电话


492

我需要为移动设备构建一个网页。我只有一件事还没有弄清楚:如何通过单击文本触发电话?

是否可以像mailto:电子邮件标签那样输入一个特殊的URL ?

特定于设备的解决方案不是首选。

我知道iPhone会自动识别电话号码并为此创建一个链接,但是如果这也可以用于图像...以及大多数移动设备,那就太好了。

Answers:


866

大多数现代设备都支持tel:方案。因此,使用<a href="tel:555-555-5555">555-555-5555</a>它应该很好。

如果您想将其用于图像,<a>标签可以<img/>像处理其他正常情况一样处理放置在其中的标签:<a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a>


12
如何将其降级到台式机?您显然不希望此链接指向桌面吗?还是我必须浏览器嗅探并杀死封闭标签?
3Dom 2013年

9
@ 3Dom 试试看。它启动或询问您的电话程序。
Cees Timmerman 2014年

1
@ 3Dom桌面Aurora 29.0a2(2014-02-07)中没有问题。您可以使用图像链接进行呼叫(请参阅安德鲁的回答),并在其旁边以纯文本显示数字。
Cees Timmerman 2014年

2
供将来参考:在OS X Yosemite及更高版本上,这将启动Facetime应用程序,并且如果用户有iPhone,则可以让他们实际使用台式机/笔记本电脑进行呼叫。
Jeff Huijsmans 2015年

8
您好,请不要忘记加加号和国家代码,例如:+ 1-555-555-5555如果您使用的是Skype,则这是即时拨号所必需的。
塞缪尔·拉姆赞

59

正确的URL方案是tel:[number],所以您可以这样做

<a href="tel:5551234567"><img src="callme.jpg" /></a>

45

为了完整性,想在这里添加答案。

<a href="tel:1234567">Call 123-4567</a>

在大多数设备上都可以正常工作。但是,在台式机上,该链接将显示为链接,单击该链接不会执行任何操作,因此应考虑使用CSS使其仅在移动设备上有条件地可见。

另外,您应该知道Skype(相当流行)默认情况下使用其他语法(但可以将其参数化为使用tel :)。

<a href="callto:1234567">Call 123-4567</a>

但是,我认为在最新的移动浏览器(我肯定在Android上知道)中,tel语法现在应该提供可用应用程序的弹出窗口,可用于完成调用操作。


会知道如何在android中打开共享对话框以获取URL?
发狂

@whizcreed对不起兄弟,不是我所在的地区。
vvohra87

4
是“ tel”协议与Skype一起使用,还是仅与它们的“ callto”协议一起使用?
Hutch Moore

@HutchMoore可以将“ tel:”前缀与Skype关联。Skype参数中有一个选项(该选项旁边允许使用“ callto:”前缀发起呼叫。)
salcoin16年

20

可点击的智能手机链接代码:

以下链接可用于制作可点击的电话链接。您可以复制下面的代码并将其粘贴到您的网页中,然后使用您的电话号码进行编辑。此代码可能不适用于所有手机,但适用于iPhone,Droid / Android和Blackberry。

<a href="tel:1-847-555-5555">1-847-555-5555</a>

如上所示,电话号码链接可以与破折号一起使用,或者在以下示例中可以不带破折号使用:

<a href="tel:18475555555">1-847-555-5555</a>

只要在该示例中使用“ tel:18475555555”设置电话号码,也可以在链接中使用任何文本:

<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>

您可以在下面单击可点击的电话超链接。在大多数非电话浏览器中,此链接将为您显示“无法显示网页”错误,否则将不会发生任何事情。

注意: iPhone Safari浏览器将自动检测页面上的电话号码,并将文本转换为呼叫链接,而无需使用此页面上的任何代码。

WTAI智能手机链接代码:WTAI或“无线电话应用程序接口”链接代码如下所示。该代码被认为是正确的手机协议,可以在Droid等智能手机上使用,但是,可能不适用于iPhone上的Apple Safari,建议您使用上述代码。

<a href="wtai://wp/mc;18475555555">Click Here To Call Support 1-847-555-5555</a> 

3

本质上,请使用attr指向前缀为的电话号码的<a>元素。请注意,加号可用于指定国家/地区代码,连字号可仅用于人眼。hreftel:

MDN网络文档

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#Creating_a_phone_link

HTML <a>元素(或锚元素),其href属性一起,创建一个链接到其他网页,文件在同一页面中的位置,电子邮件地址,或任何其他网址。

[…]

提供电话链接有助于用户查看Web文档和连接到电话的笔记本电脑。

<a href="tel:+491570156">+49 157 0156</a>

IETF文件

https://tools.ietf.org/html/rfc3966

tel电话号码的URI

“ tel” URI具有以下语法:

telephone-uri = "tel:"电话订户

[…]

例子

tel:+1-201-555-0123:此URI指向美国的电话号码。包括连字符以使数字更易于阅读。他们将国家,区号和订户号分开。

tel:7042;phone-context=example.com:URI描述了在“ example.com”上下文中有效的本地电话号码。

tel:863-1234;phone-context=+1-914-555:URI描述了在特定电话前缀内有效的本地电话号码。


0

只需使用HTML锚标记<a>,并启动属性hreftel:。我建议以国家/地区代码开头的电话号码。请注意以下示例:

<a href="tel:+989123456789">NO Different What it is</a>

在此示例中,国家/地区代码为+98

提示:它非常适合手机,我知道macOS上的tel:前缀调用FaceTime,但是不确定Windows上的前缀,但是我猜想它导致了Skype的启动。

有关更多信息:您可以访问浏览器支持的URL方案列表,以了解所有href值前缀。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.