手机点击网页链接时如何触发电话答案

【问题标题】：How to trigger a phone call when clicking a link in a web page on mobile phone手机点击网页链接时如何触发电话
【发布时间】：2010-12-09 04:13:23
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html phone-call mobile-phones url-protocol

【解决方案1】：

此时（2021 年）要在 PC 或平板电脑和 Android 上工作（未在 IOS 中测试但应该可以工作）您需要将 data-rel="external" 添加到“a”标签，示例：

<a href="tel:+576015000000" data-rel="external">Call Me...</a>

【讨论】：

【解决方案2】：

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

&lt;a href="tel:5551234567"&gt;&lt;img src="callme.jpg" /&gt;&lt;/a&gt;

【讨论】：

【解决方案3】：

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

以下链接可用于制作可点击的电话链接。您可以复制下面的代码并将其粘贴到您的网页中，然后使用您的电话号码进行编辑。此代码可能不适用于所有手机，但适用于 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>

【讨论】：

【解决方案4】：

只需使用 HTML 锚标记 <a> 并以 tel: 开头属性 href。我建议以国家代码开头的电话号码。注意下面的例子：

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

对于这个例子，国家代码是+98。

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

更多信息：您可以访问the list of URL schemes supported by browsers 了解所有href 值前缀。

【讨论】：

【解决方案5】：

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

MDN 网络文档

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

HTML <a> 元素（或锚元素）及其 href 属性创建指向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他内容的超链接网址。

[…]

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

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

IETF 文件

https://www.rfc-editor.org/rfc/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 描述了一个本地在特定电话前缀内有效的电话号码。

【讨论】：

【解决方案6】：

为了完整起见，想在此处添加答案。

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

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

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

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

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

【讨论】：

“tel”协议是否适用于 Skype，还是仅适用于其“callto”协议？

【解决方案7】：

大多数现代设备都支持 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>

【讨论】：

桌面如何降级？您显然不希望它携带指向桌面的链接，对吧？还是我必须浏览器嗅探并杀死封闭标签？
@3Dom Try it. 它启动或询问您的电话程序。
@3Dom 在桌面 Aurora 29.0a2 (2014-02-07) 中没问题。您可以使用图片链接拨打电话（请参阅 Andrew 的回答），并在其旁边以纯文本形式显示号码。
供将来参考：在 OS X Yosemite 及更高版本上，这将启动 Facetime 应用程序，如果用户有 iPhone，则让他们实际使用台式机/笔记本电脑通话。
您好，如果您使用 Skype，请不要忘记输入加号和国家代码：+1-555-555-5555，这是即时拨号的必备条件。