如何在网站上添加一个可点击的电话号码，但在不支持触控的网站浏览时隐藏链接。
我可以使用 Modernizr 来设置它，但是我不知道如何做。
<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>
21个回答
1
感谢TattyFromMelbourne的帖子，我现在使用了一个相当简单的方法：
我的按钮id="call"将根据他的"probablyphone"测试函数进行电话呼叫，但无论如何都会滚动到联系信息部分，使按钮具有工作用途。
我还用空函数替换了警报，以删除弹出窗口。
<a id="call" href="#contact">PHONE US</a>
$("#call").on('click', function() {
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
var link = "callto:15555555555";
if ( !probablyPhone ) {
window.alert = function() {};}
else{window.location.href = link;}
});
</script>
- bill c
1
我的方法类似于上面的另一种方法; 我考虑了几个因素：
- 正如我们所知，没有好的编程方式来检测支持情况。这是一个罕见的情况，我们被迫解析UserAgent字符串。
- 这应该是客户端的; 没有必要进行服务器端检测。
- 现在有桌面浏览器可以处理
tel:链接; 在桌面上，Chrome的行为最多只是在单击时不做任何事情。 最好的情况下，您可以使用Google Voice拨打电话。 - 因为Chrome的回退行为是在单击时什么也不做，所以我们应该将该行为用作所有浏览器的回退。
- 如果您的页面负责创建
tel:链接，则应对所有tel:链接负责并在浏览器中禁用自动检测。
记住所有这些，我建议首先向您的<head>添加一个meta标签：
<meta name="format-detection" content="telephone=no"/>
接下来，定义一个JavaScript函数，解析UserAgent并返回true，当且仅当我们认为浏览器在链接被点击时不会将我们带到错误页面：
function hasTelSupport()
{
return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}
然后，在你的链接的
onclick属性中调用该函数：<a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>
这将使tel:链接在Chrome、Edge、iOS Safari、Android浏览器、Blackberry、Dorothy、Firefox Mobile、IE Mobile、Opera Mini、Opera Mobile和webOS上可被点击。在其他设备或浏览器上单击链接时不会产生任何效果。
请为您的
tel:链接使用国际格式，即第一个字符应为加号+和国家代码。- Adam Leggett
1
你可以使用CSS3媒体查询来检测移动窗口并相应地隐藏链接。
@media(max-width:640px){
.your-calling-link{
display:none;
}
}
或者，如果你想显示链接但只禁用点击功能，请使用jQuery函数：
screen.width
或者
screen.innerWidth
并使用以下方法禁用链接的点击功能
$('.your-link').off(click);
- humairah codes
1
我觉得我可以在这个有点冗长的讨论中发表我的意见。
基本上，我使用onClick事件（在链接上）来执行JavaScript并返回一个布尔值true或false。如果返回值为true，即某些检测设备是否为手机的变量或函数返回true，则浏览器会打开href URL。如果返回值是false，则href URL实际上不起作用。（这是HTML5之前的标准HTML行为。）
这就是我的意思：
<html>
<head>
<title>tel markup example</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <!-- Does not really matter what version of jQuery you use -->
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
if ( !probablyPhone ) {
alert ("Your device is probably not a phone");
( function( $ ) {
$( '.call' ).css ( "text-decoration", "none" );
$( '.call' ).css ( "color", "black" );
$( '.call' ).css ( "cursor", "default" );
} )( jQuery );
}
}
</script>
</head>
<body onLoad="initialize();">
Please ring (some fictitious number in Australia): <a href="tel://+61391112222" class="call" onClick="return probablyPhone;">+61 3 9111 2222</a>
</body>
</html>为了完成这篇文章/回答，感谢墨尔本的朋友rgb在这个stackoverflow帖子中编写了简洁的JavaScript代码，用于检测电话（基于用户代理和ontouchstart事件）。
- TattyFromMelbourne
1
创建两个独立的div并使用display:hidden是处理这个问题的一种方法。
示例：
这应该可以让您根据屏幕大小隐藏一个div。虽然789只是我选择的数字，但您可以选择您认为适合移动设备的尺寸。您可以在像我在谷歌上找到的这个网站或其他类似网站上在线查找它们。最后，这只是一个快速的CSS标记，您可能需要进行调整，但思路已经有了。
示例：
<div class="mobile-desktop"><p>123-456-7890</p></div>
<div class="mobile-mobile"><a href="tel:123-456-7890">123-456-7890</a></div>
在你的 CSS 中设置移动端断点。这部分真的是由你决定的。假设：
@media only screen (min-width: 768px){
.mobile-mobile {
display:none;
}
}
@media only screen (max-width: 767px){
.mobile-desktop{
display:none;
}
}
这应该可以让您根据屏幕大小隐藏一个div。虽然789只是我选择的数字，但您可以选择您认为适合移动设备的尺寸。您可以在像我在谷歌上找到的这个网站或其他类似网站上在线查找它们。最后，这只是一个快速的CSS标记，您可能需要进行调整，但思路已经有了。
- Mark El-Rayes
2
太好了，谢谢！我在2013年提出了这个问题，人们仍然在回答它 :) - jaycodez
哈。我自己也在寻找答案并阅读了你的帖子。我希望有更简单的方法。 - Mark El-Rayes
0
将此输入自定义CSS中，然后就可以了：
a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }
根据需要更改你的颜色。
干杯！
- Dr Duh
0
当检测到移动设备时，我通过JavaScript添加以下CSS。
pointer-events:none
JavaScript 代码如下：
var a = document.getElementById("phone-number");
if (Platform.isMobile()) // my own mobile detection function
a.href = "tel:+1.212.555.1212";
else
$(a).css( "pointer-events", "none" );
- Sileria
0
不要将屏幕尺寸作为要求。
您可以使用CSS媒体查询，例如：
@media (pointer: fine) { /* this is for devices using a mouse, maybe a pen */
a[href^="tel:"] { /* select only "tel:" links */
pointer-events: none; /* avoid clicks on this element */
}
}
@media (pointer: coarse) { /* this works for mobile phones */
}
更多信息：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/pointer
- Alex Lana
0
这种方法可以在不添加任何CSS的情况下工作。
尝试将a标签替换为其他东西，比如span标签，但只针对移动浏览器。好处是您不需要使用CSS来掩盖此链接并防止默认操作，同时仍将其保留为链接。它将不再是a，因此您不必担心。
我创建了一个示例here。加粗的电话就是这样工作的，查看下面的代码。
我从一个回答者那里获取了一段代码，用于确定浏览器是否为移动设备。您必须使用class="tel"标记这些链接，或找到一种确定href中是否有"tel:"的方法。还需要使用JQuery。
// define if browser is mobile, usually I use Anthony's Hand mobile detection library, but here is simple detection for clarity
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
if ( !probablyPhone ) {
// find all the A with "tel:" in it, by class name
$('a.tel').each(function(){
var span = document.createElement('span');
// SPAN inherits properties of A, you can also add STYLE or TITLE or whatever
span.innerHTML = this.innerHTML;
span.className = this.className;
// replace A with SPAN
this.parentNode.insertBefore(span, this);
this.parentNode.removeChild(this);
});
}
- Armalong
1
你应该使用反引号 ` 来强调特定于语言的词语，比如 href 和 span，而不是使用全大写字母。 - Alexis Tyler
0
在我的目标网站中，所有电话链接标记都遵循这种模式：
<a href="tel:111-222-3333"">111-222-3333</a>。我的解决方案非常简单：function setPhoneLink() {
if (screen.width > 640) {
$("a[href^='tel:']").each(function(){
$(this).replaceWith($(this).text());
});
}
}
设备宽度：移动 <640；平板 >=768 且 <1024；桌面 >=1024。 来源： http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
- Canada Wan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
tel:的支持并不取决于屏幕大小、触摸支持、移动设备还是桌面设备等因素。你应该做最简单的事情，始终显示tel:链接。使用title解决方案（最佳答案）可以提供一些上下文和/或显示实际号码，这是最清晰的解决方案，而无需检测。 - toastal