Html 如何在手机上点击网页中的链接时触发电话呼叫

How to trigger a phone call when clicking a link in a web page on mobile phone

提问by Frederic Morin

I need to build a web page for mobile devices. There's only one thing I still haven't figured out: how can I trigger a phone call through the click of text?

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

Is there a special URL I could enter like the mailto:tag for emails?

是否有我可以输入的特殊 URL，例如mailto:电子邮件标签？

Device specific solution are not preferred.

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

I know iPhone automatically recognizes phone numbers and creates a link for this, but it would be great if this could be done for images too... and also for most mobile devices.

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

回答by meme

Most modern devices support the tel: scheme. So use <a href="tel:[phone]">555-555-5555</a>and you should be good to go.

大多数现代设备都支持 tel: 方案。所以使用<a href="tel:[phone]">555-555-5555</a>，你应该很高兴。

If you want to use it for an image, the <a>tag can handle the <img/>placed in it just like other normal situations with : <a href="tel:[phone]"><img src="path/to/phone/icon.jpg" /></a>

如果你想将它用于图像，<a>标签可以<img/>像其他正常情况一样处理放置在其中的内容：<a href="tel:[phone]"><img src="path/to/phone/icon.jpg" /></a>

回答by Jess

The proper URL scheme is tel:[number] so you would do

正确的 URL 方案是 tel:[number] 所以你会这样做

<a href="tel:[phone]"><img src="callme.jpg" /></a>

回答by vvohra87

Want to add an answer here for the sake of completeness.

为了完整起见，想在这里添加一个答案。

<a href="tel:[phone]">Call 123-4567</a>

Works just fine on most devices. However, on desktops this will appear as a link which does nothing when you click on it so you should consider using CSS to make it conditionally visible only on mobile devices.

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

Also, you should know that Skype (which is fairly popular) uses a different syntax by default (but can be parametered to use tel:).

此外，您应该知道 Skype（相当流行）默认使用不同的语法（但可以参数化为使用 tel:）。

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

However, I think in latest mobile browsers (I know for sure on Android) now the telsyntax should offer a popup of available applications that can be used to complete the calling action.

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

回答by Gaurang P

Clickable smartphone link code:

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

The following link can be used to make a clickable phone link. You can copy the code below and paste it into your webpage, then edit with your phone number. This code may not work on all phones but does work for iPhone, Droid / Android and Blackberry.

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

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

Phone number links can be used with the dashes, as shown above, or without them as well as in the following example:

电话号码链接可以与破折号一起使用，如上所示，也可以不使用破折号以及以下示例：

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

It is also possible to use any text in the link as long as the phone number is setup with the "tel:[phone]" as in this example:

也可以在链接中使用任何文本，只要电话号码设置为“tel:[phone]”，如下例所示：

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

Below is a clickable telephone hyperlink you can check out. In most non-phone browsers this link will give you a "The webpage cannot be displayed" error or nothing will happen.

下面是一个可点击的电话超链接，您可以查看。在大多数非手机浏览器中，此链接会给您一个“网页无法显示”错误，否则什么也不会发生。

NOTE:The iPhone Safari browser will automatically detect a phone number on a page and will convert the text into a call link without using any of the code on this page.

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

Wtai smartphone link code: The wtai or "Wireless Telephony Application Interface" link code is shown below. This code is considered to be the correct mobile phone protocol and will work on smartphones like Droid, however, it may not work for Apple Safari on iPhone and the above code is recommended.

Wtai 智能手机链接代码： wtai 或“无线电话应用程序接口”链接代码如下所示。此代码被认为是正确的手机协议，可以在 Droid 等智能手机上运行，​​但是，它可能不适用于 iPhone 上的 Apple Safari，建议使用上述代码。

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

回答by 2540625

Essentially, use an <a>element with an hrefattr pointing to the phone number prefixed by tel:. Note that pluses can be used to specify country code, and hyphens can be included simply for human eyes.

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

MDN Web Docs

MDN 网络文档

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Creating_a_phone_link

The HTML <a>element(or anchor element), along with its href attribute, creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

[…]

Offering phone links is helpful for users viewing web documents and laptops connected to phones.

<a href="tel:[phone]">[phone]</a>

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

[…]

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

<a href="tel:[phone]">[phone]</a>

IETF Documents

IETF 文件

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

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

The telURI for Telephone Numbers

The "tel" URI has the following syntax:

telephone-uri= "tel:"telephone-subscriber

[…]

Examples

tel:[phone]: This URI points to a phone number in the United States. The hyphens are included to make the number more human readable; they separate country, area code and subscriber number.

tel:7042;phone-context=example.com: The URI describes a local phone number valid within the context "example.com".

tel:[phone];phone-context=+1-914-555: The URI describes a local phone number that is valid within a particular phone prefix.

tel电话号码的URI

“tel”URI 具有以下语法：

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

[…]

例子

tel:[phone]：此 URI 指向美国的电话号码。包含连字符以使数字更易读；它们将国家、区号和用户号码分开。

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

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

回答by AmerllicA

Just use HTML anchor tag <a>and start the attribute hrefwith tel:. I suggest starting the phone number with the country code. pay attention to the following example:

只需使用 HTML 锚标记<a>并href以tel:. 我建议以国家/地区代码开头的电话号码。请注意以下示例：

<a href="tel:[phone]">NO Different What it is</a>

For this example, the country code is +98.

对于此示例，国家/地区代码为+98。

Hint: It is so suitable for cellphones, I know tel:prefix calls FaceTimeon macOS but on Windows I'm not sure, but I guess it caused to launch Skype.

提示：它非常适合手机，我知道macOS 上的tel:前缀呼叫FaceTime，但在 Windows 上我不确定，但我猜它导致启动 Skype。

For more information: you can visit the list of URL schemes supported by browsersto know all hrefvalues prefixes.

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