快速提示：使电话号码有用

我不会以“过去的日子里人们在多种设备上浏览您的网站”的方式开始这个快速提示，但这是事实。 许多移动设备都可以很好地识别HTML中的电话号码，使其可单击，以便您可以直接拨打该号码-但并非总是如此。

如果用户的手机无法将电话号码识别为“可呼叫”，会发生什么？ 例如，也许平台无法识别您输入数字的方式。 错失良机！

（查看马克哈蒙德的名单中被识别为iOS和Android模式。）

使该数字可点击

这简直太简单了：将电话号码包裹在锚点中，但不要使用http*协议（或通常会在锚点中粘贴的其他内容），请使用tel:或tel:// 。 这样，即使您使用了无法识别的模式，设备仍将知道该怎么做：

<a href="tel:+4411122233344">+44 (0)111 - 222 333 44</a>

不支持的浏览器（例如您的台式机）尚不知道如何使用tel:协议-除非用户启用了某种扩展名，该扩展名允许Skype识别电话号码。 谷歌浏览器会很乐意忽略点击，但此刻其他主要浏览器开始哭泣。 其他非电话设备（例如iPad）将识别该号码，并提示用户在其通讯录中添加联系人-对于台式机浏览器来说，这也是明智的选择。

样式电话链接

作为可选的额外功能，让我们通过设置每个样式的样式，使用户更清楚他们正在查看电话链接。 为此，我们将使用属性值选择器，仅将href属性中包含字符串tel:的链接的:before伪元素定位为目标：

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

此处的小克拉^表示它正在寻找href属性以我们指定的字符串开头的所有元素。 tel:和tel://因此都将在这里讨论。 我们插入了一个小型Unicode电话\260E; ，因此我们甚至不需要使用webfont图标。 真好

我们已经全部完成，以可访问性的名义尝试一下！

进一步阅读

• 移动网络快速提示：电话号码链接
• 您必须记住的30个CSS选择器

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-make-telephone-numbers-do-something--webdesign-9271