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

HTML

L猪猪

2020-03-19

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

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

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

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

第2358篇《单击手机网页上的链接时如何触发电话》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
理查德Jim小胖 2020.03.19

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

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.

<a href="tel:1-847-555-5555">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:18475555555">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:18475555555" as in this example:

<a href="tel:18475555555">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.

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

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

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

本质上,请使用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描述了在特定电话前缀内有效的本地电话号码。

神奇西里泡芙 2020.03.19

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

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

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

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

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

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

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

宝儿神乐 2020.03.19

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

泡芙小小 2020.03.19

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

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

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

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android