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

Is there a way to tell if an end user will be able to handle <a href="tel:###"> links?

提问人:Andrew G. Johnson 提问时间:6/22/2013 最后编辑:Chris MorganAndrew G. Johnson 更新时间:6/2/2022 访问量:1964

问:

因此,如果您想链接到电话号码,您可以执行类似操作

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

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

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

HTML URI URL 方案

评论

1赞 Chris Morgan 6/22/2013
我觉得这很有趣:就在一小时前,我还在调查这个问题(以及链接)。geo:
1赞 Chris Morgan 6/22/2013
我发现一个关于这个话题的“讨论”(片面的!)是 sitepoint.com/forums/......。那里的技术在 Ubuntu 上的 Chrome 中对我不起作用;Chrome 会在单击时尝试将其传递给,并且 XMLHttpRequest 不会失败。xdg-open
0赞 Andrew G. Johnson 6/22/2013
@ChrisMorgan - 是的,这个解决方案充其量似乎有问题,不幸的是,这对谷歌来说是一个棘手的问题
1赞 Andrew G. Johnson 6/22/2013
@ŠimeVidas - 这似乎是针对 <input type=“tel”>而不是 <a href=“tel:#”>
2赞 Chris Morgan 6/22/2013
我建议将其作为 href tel 和标准浏览器的副本关闭,但我不忍心对一个好问题这样做,而支持一个朝着错误方向发展的问题,答案纯粹与检测移动浏览器有关......幸运的是,那里的问题可以解释为询问如何检测移动浏览器而不是 URI 方案支持,因此我很高兴不将其标记为重复项。tel:

答:

-2赞 Rudiger Kidd 6/23/2013 #1

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

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

这结合了这些问题的答案,一个 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>
    <?}?>

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

0赞 mrmrw 6/25/2013 #2

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

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

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

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

评论

0赞 Chris Morgan 6/25/2013
我真的不喜欢这种方式......那么,它不是适当的数据,它得到了多广泛的支持?就我自己而言,我也想要它用于链接,所以这不是一个通用的解决方案。不过,谢谢你的想法;在某些情况下,它可能很有用。geo:
-3赞 greg.ms 7/6/2013 #3

可以使用 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,您可以触发链接并显示包含所需数据(例如电话号码)的灯箱。

评论

0赞 Chris Morgan 7/13/2013
会不会那么容易。在这种情况下,同一浏览器可能支持也可能不支持该方案。tel:
-1赞 mirhagk 8/22/2015 #4

据我所知,似乎没有一个好的、可靠的方法来做到这一点。这取决于除了浏览器之外还安装了什么软件,因此我认为它不会暴露在网页上(否则您可以使用它来检查用户是否安装了某些软件,尤其是使用特定于应用程序的链接,如 itunes 或 visual studio)。

编辑:正如评论中指出的那样,firefox确实会尝试导航,并且会显示一个错误页面,显示以下解决方案不适用于firefox。

另一种方法是简单地处理某人点击它并且它不能正常工作。使用 chrome 进行测试,如果无法识别协议,浏览器似乎什么都不做,因此您可以添加一个 onclick,该 onclick 在之后获取部分并转换为实际数字。因此,如果他们没有安装任何东西,单击它会显示数字,这可能是一个不错的折衷方案?tel:click to call

评论

0赞 Chris Morgan 8/27/2015
至少Firefox(股票,桌面)将卸载您的页面,显示错误页面,因为它无法理解链接。Chrome 也可能能够处理它,您无法判断它是否已经处理了它。因此,这种方法从根本上是行不通的。tel:
2赞 Aaron Gustafson 9/17/2015 #5

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

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

顺便说一句,设置链接也总是一个好主意:-)这会将数字保留在一行上,因此连字符不允许它中断。white-space: nowraptel:

a[href^=tel:] { white-space: nowrap; }
0赞 Grant McLean 6/2/2022 #6

我知道我差不多 10 年后才出现,但我研究了这个问题,以便在我的一个 Web 应用程序中定制 UI,最终我确定的答案是主用户菜单上的切换选项:

✔ This device is a phone

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

确切的措辞将取决于您的应用程序以及您需要知道的原因,但归根结底,用户知道他们的设备是否能够拨打电话,而不问他们,我们能做的最好的事情就是猜测