电话链接的现状 | CSS-Tricks

电话链接确实存在。就像您点击（可能）跳转到另一个页面的锚链接一样，这些链接是您点击在支持电话功能的设备上拨打电话的链接。它们已经存在很长时间了。然而，它们让我很困惑。例如，许多设备会自动识别电话号码并为我们提供链接，但并非总是如此。

移动设备上的网络流量和能够拨打电话的桌面应用程序的数量都足以让我们更深入地了解电话链接。

默认用法

我们在本网站上有一个关于电话链接的代码片段，它自 2011 年就一直存在。

<a href="tel:1-562-867-5309">1-562-867-5309</a>

这在文本链接上也适用

<a href="tel:1-562-867-5309">Click to Call!</a>

tel:与其说是一个功能，不如说是一个协议，就像 http: 和 mailto: 是 <a> 标签功能的协议一样。规范本身对此没有说明，尽管 HTML5 确实提供了对自定义协议处理程序的支持，从而允许使用此类协议。

您可能想知道，在没有关于它的官方规范的情况下，为什么 tel: 可以被认为是默认用法。这要归功于它是在 2000 年就提出的标准，后来被 iOS 采用，使其在 2007 年左右成为事实上的标准。还有其他基于电话的协议（我们将在后面介绍），但鉴于 tel: 相对突出，我们将重点介绍它。

浏览器支持

我们看到 tel: 作为没有官方文档的链接的协议处理程序出现；在没有文档的情况下，我们经常会看到浏览器支持和行为方面的差异。这并不是说浏览器无法识别 <a> 标签本身。相反，浏览器可能会对点击该链接时要执行的操作做出不同的决定。例如，浏览器可能会假设需要打开另一个应用程序，并会触发一个对话框询问要使用哪个应用程序。在其他情况下，链接可能完全被忽略。

浏览器	是否链接？	点击时...
Android	是	启动电话应用程序
BlackBerry 9900	是	发起电话呼叫
Chrome	是	触发对话框，确认使用其他应用程序
Edge	是	触发对话框，确认使用其他应用程序
Internet Explorer 11	是	触发对话框，确认使用其他应用程序
Internet Explorer 11 Mobile	是	发起电话呼叫
iOS	是	触发选项，呼叫、发短信、复制或将号码添加到联系人应用程序
Opera（OSX）	是	触发对话框，确认使用其他应用程序
Opera（Windows）	是	触发错误对话框，该对话框无法识别该协议
Safari	是	启动 FaceTime

设置电话链接的样式

设置电话号码的样式就像设置任何其他链接一样。事实上，它将继承锚点的默认样式。

a {
  color: orange;
  text-decoration: none;
}

假设我们只想对电话链接应用样式。我们可以使用伪选择器来在给定 URL 中搜索 tel: 文本。

a[href^="tel:"] {
  color: orange;
  text-decoration: none;
}

Tuts+ 有一个不错的技巧，它使用 ::before 伪选择器在显示数字之前添加 unicode 电话字符。

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

其他与电话相关的链接

信不信由你，tel: 不是通过链接发起电话呼叫的唯一方法。我们还可以使用以下一些其他自定义基于电话的协议处理程序。

callto: 与 tel: 完全相同，但用于通过 Skype 应用程序发起呼叫。
自动检测：许多浏览器会自动检测 HTML 中的电话号码并将其链接起来，无需更改标记。例如，iOS 会完全这样做，但在 Android 上的 Chrome 似乎并非如此。
sms: 跳过呼叫，直接进入短信。这似乎比 tel: 在包括移动设备在内的浏览器中支持度低得多。
fax: 使用传真机重回未来。同样，可靠性不佳。

最佳实践

在谈论关于没有规范的内容的最佳实践时，这有点滑稽。规范确实对“点击呼叫”理念给出了简短的意见，但在处理电话号码和链接时，需要注意以下几点。

考虑上下文

电话链接可以成为绝佳的号召性用语，尤其是在移动电话上，因为它减少了内容与呼叫之间的摩擦。同时，电话链接也可以被认为是桌面体验的障碍，因为如果设备缺少支持该链接的应用程序，则无法进行电话呼叫。

一个想法是专门为电话链接创建一个类，并尝试根据我们对浏览器的了解来显示或隐藏它们。Modernizr 和媒体查询在这里很有用，尽管完全不精确。

使用国家代码

国家代码不是必需的，但对于拥有国际流量的网站来说，它可能是不错的选择。国家代码可以以 + 开头，但这也不是必需的。

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

搜索引擎优化

SEO 专家可能比我更有发言权，但 Google 提供了本地企业结构化数据格式，使用它可以让爬虫更好地识别电话链接，并在搜索结果页面上对其进行格式化，以使号码更易于操作。Dudley Storey 提供了一个很好的概述，其中包含以下示例

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Beach Bunny Swimwear</h1>
  Phone: 
    <span itemprop="telephone">
      <a href="tel:+18506484200">
         850-648-4200
      </a>
    </span>
</div>

另一方面，如果您希望搜索引擎不跟踪电话链接，可以添加 rel="nofollow" 来阻止链接被跟踪和索引。对于未被指定为号召性用语的任何链接，这可能是一个好主意，因为网络爬虫可能会倾向于尝试跟踪它到无处可去的地方。

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

在 iOS 中关闭号码检测

如果您打算将电话链接添加到您的标记中，那么您可能还想考虑禁用 iOS 自动检测电话号码并覆盖您的样式。将以下内容添加到文档 <head> 中以关闭该功能

<meta name="format-detection" content="telephone=no">

进一步阅读

快速提示：让电话号码发挥作用由 Tuts+ 提供
使用 HTML5 和微数据将电话号码添加到网页由 Dudley Storey 提供
原始草案提案 2806，已被提案 3966 弃用
Apple URL 方案参考

Lewis Cowles

# 2016 年 2 月 23 日

自 2009 年以来一直在使用 [href^=”tel:”] 链接。虽然 Skype 可能会使用 callto:，但它也对在我的 Ubuntu 和 Windows 8.1 笔记本电脑上使用 Skype 的浏览器使用 “tel:” 协议链接（可能需要他们的点击拨号插件 IDK）。

我从未遇到过使用现代智能手机无法拨打电话的用户，但对于 Windows 用户，如果它最初无法工作，可能需要一个注册表项来将协议标识符映射到程序。

https://caniuse.cn/#search=tel

Robin

nofollow 不会告诉 Google 不要跟踪链接；它告诉 Google 不要将任何值分配给它来自其所在网站的事实。很微妙，但它不会阻止爬虫（tel: 协议可能会）。

Deborah

及时的帖子，Geoff！感谢您深入研究电话链接。我一直对如何在过去几个项目中处理电话链接感到困惑。关于使用 Google 的结构化数据格式的良好提醒。

Lewis Cowles

评论永久链接# 2016 年 2 月 23 日

您还可以添加徽标、街道地址，以及很多很酷的东西，一定要查看 schema.org 获取有关 localbusiness 和 organization 的详细信息，因为它比仅仅是电话号码更有用。

http://schema.org/Organization
http://schema.org/LocalBusiness

Daniel

有谁知道如何在元描述中生成点击通话？

Pawel Grzybek

超级酷的文章！阅读后的第一个想法：让我们制作一个 js 脚本，根据浏览器引擎替换 href 的值。在不支持的浏览器上，它可以简单地重定向到联系页面，而不是对话框。

我相信内联模式的模式有点过时了。Google 建议使用 json:ld。

Vanderson

评论永久链接# 2016 年 2 月 24 日

感谢您关于 JSON-LD 的说明（这是在搜索 SEO 时要查找的拼写），这正是我自发现 schema.org 以来一直期待的。

属性汤和混乱的 html 使我头晕目眩。:P（我以前见过 JSON-LD，但把它当作 Google 的另一个“计划”来操纵网站去做他们的工作……:P）

Max

# 2016 年 2 月 24 日

+01-562-867-5309
这是一个错误。没有这样的电话号码。北美编号计划的国际区号是 +1，而 +0 是保留的/未使用的。

Davezilla

评论永久链接# 2016 年 2 月 25 日

我也是这么理解的。我一直只使用 +1 用于美国号码。

Richard

没有提到 Firefox 的支持吗？

Davezilla

评论永久链接# 2016 年 2 月 25 日

我在台式机上从 Firefox（Mac）尝试过 tel: 链接，它试图启动 FaceTime，这是台式机的正确操作。

Josh H

很棒的阅读，Geoff。倾向于事实上的标准是一个很好的方法。电话号码可能难以管理，因为它们随着时间的推移也是非常有机的。在一个常见的用例中，我们将在某个时候不可避免地收集表单中的电话号码。

对于那些感兴趣的人，以下是一种使用字符串替换在处理表单数据时进行操作的机器友好的简单方法：https://gist.github.com/jhabdas/66abcf1ac862179cf4bf

Natan

很棒的帖子。谢谢！

Hussain

# 2016 年 2 月 25 日

非常有用的帖子。谢谢！

brianary

我不确定我是否理解您关于没有规范的意思。IANA 处理 URI 方案的注册：http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

Josh Chunick

# 2016 年 2 月 29 日

您也可以在号码中使用扩展名，方法是在扩展名后追加逗号。逗号代表暂停。

tomByrer

# 2016 年 3 月 2 日

还有 Microformats 2.0，它比 schema.org 更简洁。
http://microformats.org/wiki/h-card

Sourav Basak

# 2016 年 3 月 3 日

不错的文章。但是，需要集中精力拼写，例如 “automagically”、“HMTL5” 等等。您也可以搜索此文本。

—
此致
Sourav Basak [博主、企业家和思想家]
http://www.namasteui.com

Doug

评论永久链接# 2016 年 3 月 3 日

Hehe，“automagically” 是一个美国习语。automatic 和 magic 的合成词。自动并且您不必考虑如何使其发生；它像魔法一样发生！