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

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

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

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

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

Answer 4

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

您可以尝试查看它的移动浏览器是否可以处理链接，如果没有，请查看其他设备是否能够使用电话号码，例如Skype，如果没有，则再次显示一个普通号码。

这结合了href tel and standard browsers和Javascript to detect 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 5

可以使用BrowserDetect 脚本实现客户端实现，并使用此列表过滤用户的浏览器属性：Can i use: 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，您可以触发链接并显示包含所需数据（例如电话号码）的灯箱。