提问人:Andrew G. Johnson 提问时间:6/22/2013 最后编辑:Chris MorganAndrew G. Johnson 更新时间:6/2/2022 访问量:1964
有没有办法判断最终用户是否能够处理 <a href=“tel:###”> 链接?
Is there a way to tell if an end user will be able to handle <a href="tel:###"> links?
问:
因此,如果您想链接到电话号码,您可以执行类似操作
<a href="tel:18005555555">Click to Call</a>
这在移动网站上很常见,在桌面网站上也越来越受欢迎(我认为这在很大程度上要归功于 Skype)。但是,某些计算机/设备无法支持它。有没有办法判断用户是否能够处理 tel: 链接?
解决方案可以是服务器端或客户端,但我认为它需要是客户端。
答:
据我所知,出于安全原因,检测用户拥有哪些功能/应用程序可能很棘手,但您可以排除一些事情并从那里开始。
您可以尝试查看它是否是一个可以处理链接的移动浏览器,然后如果没有,请查看其他设备是否能够使用电话号码,例如 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>
<?}?>
我希望这对你们来说是朝着正确方向迈出的一步
只是一个想法,但如果您输入以下标题信息
<meta name="format-detection" content="telephone=yes">
您将能够在没有 tel: 前缀(甚至锚点)的情况下输入电话号码,浏览器会自动将它们转换为可点击的电话链接。
我认为这可能比功能或代理检测更可靠。
评论
geo:
可以使用 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,您可以触发链接并显示包含所需数据(例如电话号码)的灯箱。
评论
tel:
据我所知,似乎没有一个好的、可靠的方法来做到这一点。这取决于除了浏览器之外还安装了什么软件,因此我认为它不会暴露在网页上(否则您可以使用它来检查用户是否安装了某些软件,尤其是使用特定于应用程序的链接,如 itunes 或 visual studio)。
编辑:正如评论中指出的那样,firefox确实会尝试导航,并且会显示一个错误页面,显示以下解决方案不适用于firefox。
另一种方法是简单地处理某人点击它并且它不能正常工作。使用 chrome 进行测试,如果无法识别协议,浏览器似乎什么都不做,因此您可以添加一个 onclick,该 onclick 在之后获取部分并转换为实际数字。因此,如果他们没有安装任何东西,单击它会显示数字,这可能是一个不错的折衷方案?tel:
click to call
评论
tel:
DeviceAtlas 和 Wurfl 可以为您提供一些此类信息,但正如许多人指出的那样,实际上没有真正可靠的方法来检测设备拨打电话的能力。毕竟,有人可能在桌面上,但能够根据他们安装的软件(甚至他们的操作系统功能)从桌面拨打电话。
为了提供最佳体验,您应该包含链接。这将使每个人都有机会拨打该号码,如果他们可以处理的话。您可以使用 CSS 使其看起来不那么像链接,以减少不支持的浏览器/操作系统的潜在混淆。想要拨打该号码的用户无论如何都会选择它或触摸它(希望复制该号码),并且会激活链接(在触摸场景中)或看到手(在鼠标场景中),帮助他们更快地实现目标。tel:
tel:
顺便说一句,设置链接也总是一个好主意:-)这会将数字保留在一行上,因此连字符不允许它中断。white-space: nowrap
tel:
a[href^=tel:] { white-space: nowrap; }
我知道我差不多 10 年后才出现,但我研究了这个问题,以便在我的一个 Web 应用程序中定制 UI,最终我确定的答案是主用户菜单上的切换选项:
✔ This device is a phone
当用户打开或关闭此设置时,结果将存储在浏览器的 中,以便以后的会话可以记住它。window.localStorage
确切的措辞将取决于您的应用程序以及您需要知道的原因,但归根结底,用户知道他们的设备是否能够拨打电话,而不问他们,我们能做的最好的事情就是猜测。
上一个:动态创建查询
评论
geo:
xdg-open
tel: