如何在桌面上禁用与电话号码的链接？

Question

如何在网站上添加一个可点击的电话号码，但在不支持触控的网站浏览时隐藏链接。

我可以使用 Modernizr 来设置它，但是我不知道如何做。

<a href="tel:[phone]"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

- jaycodez

---

有趣的是，在即将推出的Mac OS X Yosemite中，用户可以直接从桌面Safari点击拨打电话的功能（他们的iPhone会接通电话）。这样的解决方案会对这些用户造成不便。如果有一个HTML5 API可以指示设备是否具有拨号功能，那就太好了。 - Patrick Harrington

此外，如果有人安装了Skype（或其他VoiP客户端），它很可能会捕捉到它并允许他们通过该客户端拨号。因此，我更强烈建议不要禁用链接，如果必须禁用，则只需使其看起来不像链接即可。 - Patrick Harrington

我甚至不需要一个VoiP客户端。在我的桌面上点击tel:链接会通过蓝牙连接到我的手机并拨出电话。 - Quentin

“一个不支持触摸的网站”是什么意思？ - Stewart

正如其他人所指出的，整个概念是错误的，而且从错误的角度来看待这个问题。tel: 的支持并不取决于屏幕大小、触摸支持、移动设备还是桌面设备等因素。你应该做最简单的事情，始终显示 tel: 链接。使用 title 解决方案（最佳答案）可以提供一些上下文和/或显示实际号码，这是最清晰的解决方案，而无需检测。 - toastal

Answer 1

你能把代码复制一份吗？也就是说...

<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:[phone]">0800-000-000</div>

那么根据你的浏览器大小，只需对相应的类使用'display:none;'即可。

- Jamie Cottrell

---

这不是一个答案，因为它没有解释如何检测tel:链接的支持。如果你参考屏幕尺寸，那是无用的，因为现在移动设备的屏幕尺寸已经与桌面端相同了。 - olamedia

Answer 2

我刚刚在处理这个问题时查找解决方案，发现了这个帖子（以及其他一些帖子）。我必须承认我没能让它们中的任何一个正常工作。我相信我做错了什么，但我想出了一个技巧。

正如其他人指出的那样，将CSS更改为隐藏可见链接指示（color、text-decoration、cursor）是第一步，也是最简单的步骤。技巧是为tel链接定义一个标题。

<p>Just call us at <a class="cssclassname" href="tel:[phone]" 
title="CLICK TO DIAL - Mobile Only">[phone]</a>.</p>

通过这种方式，不仅可以通过 CSS 掩盖链接的可见指示器（请参考其他人的示例），而且如果有人悬停在链接上，标题将弹出并显示“仅限移动设备 - 点击拨号”。这样，不仅用户体验更好，而且您的客户也不会指责您有损坏的链接！

- John T

---

我不明白为什么这个回答被接受了，因为它完全没有回答问题。 - MrUpsidown

欢迎发表更好的解决方案。正如我在回答中承认的那样，这是一种欺骗行为，但似乎对一些人来说是可接受的解决方案。 - John T

使用CSS实现这一点需要考虑浏览器大小，这并不是确定支持tel:链接的可靠方法。 - Adam Leggett

这是一个作弊，诚然如此，但在我对各种设备进行的所有测试中，它似乎在各方面都按预期工作。 - John T

iPhone 6 Plus的分辨率为414x736像素（或736x414像素）。这已经接近小型桌面浏览器窗口的大小。此外，平板电脑浏览器已经支持tel：，而桌面浏览器也开始支持。 - Adam Leggett

如果桌面浏览器窗口缩小到四分之一屏幕大小或更小，则“tel：”链接将突然变为可点击状态，并且在某些浏览器中会导致错误页面；避免这种情况是此练习的目的。对于桌面上的Chrome和Edge以及所有平板电脑浏览器，我们实际上希望“tel：”链接是可点击的。 - Adam Leggett

Answer 3

对我来说，最简单的方法是使用CSS，而不需要任何新的类/设置：

a{
    color: #3399ff;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration: none;
    color: #000;

    pointer-events: none;
    cursor: default;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) { 
    a[href^="tel"]:link,
    a[href^="tel"]:visited,
    a[href^="tel"]:hover {
        text-decoration: underline;
        color: #3399ff;

        pointer-events: auto;
        cursor: pointer;
    }
}

HTML就像这样：

<a href="tel:[phone]">(+12)3 456 7</a>

这适用于现代浏览器和IE 11+。如果您需要包括8 < IE < 11，请将以下内容添加到javascript中，因为在IE中pointer-events不起作用：

var msie = window.navigator.userAgent.indexOf("MSIE ");

if (msie > 0){
    var Elems = [], Tags = document.querySelectorAll("a[href^='tel']");

    //Nodelist to array, so we're able to manipulate the elements
    for (var i = 0; i < Tags.length; i++ ) {
        Elems[ i ] = Tags[ i ];
    }

    for(var i = 0; i < Elems.length; i++){
        Elems[ i ].removeAttribute('href');
    }
}

编辑：我在另一个帖子上找到了另一个答案，可能对你有用 - SO - Answer

- Tom Siwik

Answer 4

您可以使用CSS媒体查询来控制何时将其视为链接，何时不会。

@media(min-width:768px){
 a[href^="tel:"] {
  pointer-events: none;
 }
}

如果屏幕宽度小于768像素，该元素将作为链接，而在大于此宽度时则仅作为文本显示。

- Srijay

Answer 5

我最近也遇到了同样的问题。这个问题在stackoverflow和其他地方都很常见。如何隐藏'tel:'前缀并防止它在常规浏览器中出现错误。没有一个好的单一答案。

最终，我是这样做的：

首先，我使用元语言根据用户代理字符串来过滤浏览器与移动设备（如php / coldfusion / perl）：

regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT

这段文字给出了一个针对桌面浏览器和手机的if/else条件语句。

接下来，我的href标签看起来像这样：<a class="tel" id='tel:[phone]' href=''>800-555-1212</a>

使用CSS在桌面样式表中为.tel类设置样式，使其对桌面浏览器不像链接。电话号码仍然可以被点击，但不是很明显，也不会有任何作用：

/* this is in default stylesheet, styles.css: */
.tel{
    text-decoration:none;
    color: #000;
    cursor:default;
}
/* it should be re-styled in mobile css: */
.tel{
    text-decoration: underline;
    color: #0000CC;
    cursor:auto;
}

最后，我对移动链接做了一些jquery处理。jQuery从a.tel类中获取id，并将其插入href属性中，这使得电话用户可以点击它。

整个过程看起来像这样：

<!-- get regular CSS -->
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="Screen" />

<!-- get user agent in meta language. and do if/else on result. 
 i'm not going to write that part here, other than pseudocode: -->

if( device is mobile ) {

    <!-- load mobile CSS -->
    <link rel="stylesheet" href="styles/mobile.css" type="text/css" media="handheld" />

    <!-- run jQuery manipulation -->
    <script>
        $(function(){$('a.tel').prop('href',$('a.tel').prop('id'));});
    </script>
}

<p> Call us today at <a class="tel" id='tel:[phone]' href=''>800-555-1212</a>!</p>

这种方法有一个需要注意的地方：id应该是唯一的。如果你在页面上有重复的电话号码需要链接，可以将id改为name，然后使用jQuery循环遍历它们。

- Alan

---

我同意UserAgent解析是做这件事情的几个糟糕选项中最好的一个，但为什么要在服务器端进行呢？此外，我们中的许多人不会为移动设备使用单独的.css文件。 - Adam Leggett

在这种情况下，data-* 属性比 ID 更好 - 实际上，它们就是为此目的而设计的。 - Jeremy J Starcher

Answer 6

如果你只是想在移动屏幕上禁用点击功能：

if(typeof window.orientation !== 'undefined'){
    $('a[href^="tel:"]').on('click', function(e){
        e.preventDefaults();
    });
}

希望这有所帮助 :)

- Gaurav Mehra

---

如果将此代码放置在页面底部的<script>标签中，它将起作用；不要将其放在文档准备事件中。在窗口方向支持和tel:链接支持之间存在一些不一致性（桌面版Chrome，移动版IE）。 - Adam Leggett

Answer 7

我找到了最好的方法。我知道这已经过时了，但我找到了一种非常简单的方法。

使用下面的代码：

<a href=“tel:[phone]” class="not-active">888-555-5555</a>

//This is the logic you will add to the media query
.not-active {
   pointer-events: none;
   cursor: default;
}

在你的CSS中使用媒体查询。 因此，为所有桌面设备创建一个媒体查询。

@media only screen and (min-width: 64em) {
    /* add the code */
    .not-active {
       pointer-events: none;
       cursor: default;
    }
}

现在所有桌面页面都无法单击它。

- user2990336

---

依赖屏幕尺寸来确定是否支持tel:链接是不可靠的，并且越来越不可靠。这是一个真正需要使用JavaScript的情况。此外，IE 10及更早版本不支持CSS pointer-events。 - Adam Leggett

Answer 8

对于大多数浏览器，使用简单的媒体查询即可实现此目标。以下代码对我来说非常有效：

<style type="text/css">
    #mobil-tel {
        display:none;
    }

    @media (max-width: 700px) {
        #mobil-tel {
            display:block;
        }

        #desktop-tel{
            display:none;
        }
    }
</style>

在桌面链接中省略 'href'，在移动链接中加入 'href'。

- rod122

Answer 9

我用Modernizr成功地实现了这个，具体来说是使用了touch测试。它并不是一个完美的解决方案，因为它无法帮助平板电脑或触摸笔记本电脑，但在大多数桌面浏览情况下都能正常工作。

HTML代码： 请拨打我们的电话：<a href="tel:1-800-BOLOGNA" class="call-us">1-800-BOLOGNA</a> CSS代码：

.no-touch a.call-us {
  color: black;            /* use default text color */
  pointer-events: none;    /* prevents click event */
  cursor: text;            /* use text highlight cursor*/
}

上述CSS针对非触摸设备上的具有class="call-us" 的链接，这涵盖了大多数桌面设备。

请注意，pointer-events在所有现代浏览器中都受支持，但IE仅在11+版本中支持。请参见兼容性表。

另一个解决方案是使用Modernizr.mq以及Modernizr.touch来检测屏幕宽度和触摸能力，然后使用jQuery注入电话链接。这个解决方案可以将电话链接保留在源代码之外，只会出现在某个特定宽度以下的触摸设备上（比如说720像素，这可能涵盖大多数手机但排除大多数平板电脑）。

最终，解决这个问题还是取决于浏览器供应商提供一个无懈可击的解决方案。

- Chad Evans

---

这个功能有效，除非用户随机点击它，否则会导致错误。 - SearchForKnowledge

Answer 10

这里是我开发的一个基于jQuery的简单解决方案，用于解决这个问题。请查看代码注释以了解详细说明。 https://jsfiddle.net/az96o8Ly/

// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on('click', '[href^="tel:"]', function(e){
  try{
    // These user-agents probably support making calls natively.
    if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      // Do nothing; This device probably supports making phone calls natively...
    } else {
      // Extract the phone number.
      var phoneNumber = jQuery(this).attr('href').replace('tel:', '').trim();

      // Tell the user to call it.
      alert("Please call "+phoneNumber);

      // Prevent the browser popup about unknown protocol tel:
      e.preventDefault();
      e.stopPropagation();
    }
  } catch(e){
    console.log("Exception when catching telephone call click!", e);
  }
});

- Eric Seastrand