Question

因此，如果您想要链接到电话号码，您可以执行类似

的操作

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

这在移动网站上常用，并且在桌面网站上也越来越受欢迎（主要得益于我认为的Skype）。但是有些计算机/设备无法支持它。有没有办法判断用户是否能够处理tel：links？

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

Answer 1

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

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

稍微一点，在white-space: nowrap链接上设置tel:也总是一个好主意:-)这会将数字保持在一行上，因此连字符不允许它破坏

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

Answer 2

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

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

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

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

Answer 3

据我所知，似乎并不是一个很好的可靠方法。这取决于除了浏览器之外安装了什么软件，因此我不认为它会暴露给网页（否则你可以用它来检查用户是否安装了某些软件，特别是像iTunes这样的应用程序特定链接或视觉工作室）。

编辑：正如评论中指出的那样，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，您可以触发链接并显示包含所需数据的灯箱（例如电话号码）。

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

5 个答案: