有没有办法判断最终用户是否能够处理<a href="tel:###">链接？</a>

Question

所以如果你想链接到一个电话号码，你会做类似的事情

<a href="tel:18005555555">Click to Call</a>

这通常在移动网站上使用，并且在桌面网站上也越来越受欢迎（我认为很大程度上要归功于 Skype。）但是有些计算机/设备无法支持它。 有没有办法判断用户是否能够处理 tel: 链接？

解决方案可以是服务器端或客户端，但我想它需要是客户端。

Answer 1

DeviceAtlas和Wurfl可以为您提供一些此类信息，但正如许多人指出的那样，实际上并没有真正可靠的方法来检测设备拨打电话的能力。 毕竟，有人可能在桌面上，但能够根据他们安装的软件（甚至他们的操作系统功能）从桌面上拨打电话。

为了提供最佳体验，您应该包括tel:链接。 如果他们可以处理，这将使每个人都有机会拨打该号码。 您可以使用 CSS 使其看起来不像链接，以减少非tel:支持浏览器/操作系统。 想要拨打该号码的用户将选择或触摸它（希望复制号码），并且将激活链接（在触摸场景中）或看到手（在鼠标场景中），帮助他们更快地实现目标.

顺便说一句，在tel:链接上设置white-space: nowrap也是一个好主意 :-) 这将使数字保持在一行，这样连字符就不会让它中断。

a[href^=tel:] { white-space: nowrap; }

Answer 2

只是一个想法，但是如果您输入以下标题信息

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

您将能够在没有 tel: 前缀（甚至是锚点）的情况下输入电话号码，并且浏览器会自动将它们转换为可点击的电话链接。

我认为这可能比特征或代理检测更可靠。

Answer 3

我知道我会在将近 10 年后出现，但我研究了这个问题以在我的一个 Web 应用程序中定制 UI，最终我确定的答案是主用户菜单上的切换选项：

✔ This device is a phone

当用户打开或关闭此设置时，结果将存储在浏览器的window.localStorage中，以便以后的会话可以记住它。

确切的措辞将取决于您的应用程序以及您需要知道的原因，但最终用户知道他们的设备是否有能力拨打电话，而无需询问他们，我们能做的最好的就是猜测。

Answer 4

据我所知，似乎没有一种可靠的方法来做到这一点。 这取决于除了浏览器之外安装了哪些软件，因此我认为它不会暴露给网页（否则您可以使用它来检查用户是否安装了某些软件，尤其是使用特定于应用程序的链接，如 iTunes 或视觉工作室）。

编辑：正如评论中指出的，firefox 确实会尝试导航，而是会显示一个错误页面，显示以下解决方案不适用于 firefox。

对此的替代方法是简单地处理有人点击它并且它不能正常工作。 使用 chrome 进行测试，如果无法识别协议，浏览器似乎根本不执行任何操作，因此您可以添加一个 onclick，在tel:之后执行该部分，然后将click to call转换为实际号码。 所以如果他们没有安装任何东西，点击它会显示数字，这可能是一个不错的妥协？

Answer 5

据我所知，出于安全原因，检测用户具有哪些功能/应用程序可能会很棘手，但您可以排除一些事情并从那里开始。

你可以试试看它的移动浏览器可以处理链接，如果没有，看看其他设备是否能够使用电话号码，例如Skype，如果没有，就显示一个正常的号码。

这结合了这些问题的答案 a href tel 和标准浏览器和Javascript 来检测 Skype？

<div>
<?php if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android')) { echo '<div id="tel"><a href="tel:123456">123456</a></div>'; }else{?>
    <script>
            function skype (failureFunction) {
                var $ = jQuery;

                if ($.browser.safari || $.browser.opera) {
                    return true;
                } else if ($.browser.msie) {
                    try {
                        if (new ActiveXObject("Skype.Detection")) return true;
                    } catch(e) { }
                } else {
                    if (typeof(navigator.mimeTypes["application/x-skype"]) == "object") {
                        return true;
                    }
                }
                $('a[href^="skype:"]').click(function() {
                    failureFunction();
                    return false;
                });
                return false;
            }

        jQuery(function($) {
            if (skype()) {
                $('div#tel').html("<a href='skype:123456'>123456</a>");
            } else {    
                $('div#tel').html("<p>123456</p>");
            };
        });
    </script>
    <div id="tel"></div>
    <?}?>

我希望这对你来说是朝着正确方向迈出的一步

Answer 6

可以使用BrowserDetect脚本实现客户端实现，并使用此列表过滤用户的浏览器属性：我可以使用：URI

var browser = BrowserDetect.browser;
var browserVersion = parseInt(BrowserDetect.version);
var supportsURI = true;

if((browser == 'Firefox' && browserVersion < 2) || (browser == 'Explorer' && browserVersion < 8) || (...)) {
    supportsURI = false;
}

（未测试）

如果浏览器不支持 URI-Schemes，您可以触发链接并显示包含所需数据（例如电话号码）的灯箱。