你可以检测设备是否有电话功能(例如,它可以打语音电话/短信)与JavaScript

Can you detect whether a device has phone capabilities (e.g. it can make voice calls/SMS) with JavaScript?

本文关键字:电话 短信 语音 JavaScript 例如 是否 检测设备 功能      更新时间:2023-09-26

是否有办法检测移动设备是否能够拨打语音电话/发送短信?

当在网页中应用tel:sms:链接时,这一点很重要。仅仅检测移动设备是不够的,因为平板电脑不能打电话,iTouch不能打电话,等等。

我对使用设备大小、UA字符串检测等的移动检测黑客不感兴趣。我想使用特征检测来确定设备是否能够进行语音呼叫/SMS短信。我想要一个通用的解决方案,但我主要对iOS/Android感兴趣。

我还没有看到一个明显的方法来看到sms:tel:链接得到特殊处理。

更新: @janogosteve下面已经确认目前没有可靠的功能检测。这看起来无法检测。


这里有一个全面的方法来检查这个特征检测。(阅读下面的jangosteve评论!)

  • 用其中的两个链接和一个常规的http链接创建一个测试页面
  • 抓取元素,然后遍历它们的所有属性,将它们全部复制到一个对象中。
  • 还有getComputedStyle info关于它们的一堆细节,并将其扔到对象中
  • JSON.stringify(这些东西可以稍后处理)

在iOS设备和桌面Safari/Chrome中执行上述操作

然后JSON.parse他们回到对象…并使用https://github.com/NV/objectDiff.js查看是否可以发现任何差异。

这个问题的一个新的情节转折(截至2015年2月)是许多桌面浏览器现在支持点击呼叫,但是他们不会自动检测电话号码。

所以那些用来嗅探电话号码自动检测或触摸功能的漂亮技巧现在已经过时了。

Mac OSX从Yosemite 10.9.2开始支持Facetime音频的点击通话,Windows 8/IE11使用Skype也支持同样的功能。不确定Chrome OS (Hangouts?)ipad使用Facetime进行音频通话

看起来从现在开始所有的浏览器都将支持点击呼叫。这个问题实际上是关于如何防止旧浏览器和桌面操作系统用户在点击tel:链接时出现错误。

我做了一个Javascript库,试图检测在tel:链接支持之前的旧桌面操作系统用户,但事实证明它非常有问题和复杂。

现在我的方法是:

  • A)将其作为所有用户的链接。没有支持呼叫功能的浏览器的用户将不得不忍受
  • B)使用媒体查询来隐藏链接样式,只有桌面浏览器的宽度,假设大多数桌面用户不打算用他们的台式电脑打电话。
  • C)完全跳过<a>标签和桌面,让自动检测在移动设备上执行链接魔术

我不喜欢这些解决方案,但我选择B,直到浏览器支持未来的景观变化。这样我就可以控制<a>标签,桌面用户仍然可以点击电话#,如果他们真的想的话,我可以在将来轻松地交换。