Javascript 当不在移动设备上时，如何禁用呼叫电话号码的链接？

我想建立的是一个按钮，将允许用户调用。在桌面上，这个元素看起来像是一个巨大的行动号召，

然后在移动设备上，这将既是一个行动调用，也是一个实际调用的方法

我现在需要解决的挑战是，只有在使用移动设备时才应该具备通话能力。这是我当前的代码：

<div id="headerCTA">
  <div>
    <a href="tel:888-336-1301">
      <div>
        Schedule a pickup<br>
        888-336-1301
      </div>  
    </a>
  </div>
</div> 

但当在桌面上（由屏幕宽度决定）时，此链接应被禁用。此时，如果有人碰巧在桌面上单击此按钮，它会试图打开一个页面，名为“电话：888-336-1301”

这将产生以下错误：

地址不清楚

---

Firefox不知道如何打开此地址，因为协议（tel）与任何程序都没有关联。

使用移动检测脚本，如此处接受的答案中的脚本：

然后

---

使用移动检测脚本，如此处接受答案中的脚本：

然后

---

另一个不涉及JavaScript的想法是使用CSS

指针事件

属性。使用“媒体查询”以可能无法进行呼叫的设备为目标，并将

指针事件

属性设置为

无

。这样，点击链接就不会有任何效果

您的代码可能如下所示：

@media only screen 
and (min-device-width : 768px){
  #headerCTA a{
   pointer-events: none;
  }
}

---

有关详细信息，请参阅。

另一个不涉及JavaScript的想法是使用CSS

指针事件

属性。使用“媒体查询”以可能无法进行呼叫的设备为目标，并将

指针事件

属性设置为

无

。这样，点击链接就不会有任何效果

您的代码可能如下所示：

@media only screen 
and (min-device-width : 768px){
  #headerCTA a{
   pointer-events: none;
  }
}

---

有关详细信息，请参阅。

我不认为有必要“修复”此问题，因为这是一种预期行为。将tel协议绑定到某些程序是可能的，这样你就可以从桌面上拨打电话。我认为没有必要“修复”这个问题，因为这是一种受保护的行为。它可以将tel协议绑定到某些程序，允许您从桌面拨打电话。我相信这正是我要寻找的。从我的理解来看，首先定义mobile变量，然后函数（如果不是mobile）将选择href，但它在做什么？它将href设置为“虚拟”散列值。散列不会带你去任何地方，所以基本上链接会被禁用。我相信这正是我要找的。从我的理解来看，首先定义mobile变量，然后函数（如果不是mobile）将选择href，但它在做什么？它将href设置为“虚拟”散列值。散列不带你去任何地方，因此基本上链接被禁用。