0

我想要构建的是一个允许用户调用的按钮。在桌面上，这个元素看起来像一个很大的号召性用语，

在桌面上

然后在移动设备上，这将是一个号召性用语和一个实际的调用方法。

在移动

我现在需要解决的挑战是只有在移动设备上才能打电话。这是我当前的代码：

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

[GitHub 上的代码要点 - 用于补充评论]

但是当在桌面上时（由屏幕宽度决定？）这个链接应该被禁用。目前，如果有人碰巧从桌面点击它，它会尝试打开一个页面为“tel:888-336-1301”

这会产生以下错误：

该地址不被理解 Firefox 不知道如何打开该地址，因为协议 (tel) 与任何程序无关。

4

2 回答 2

4

另一个不涉及 JavaScript 的想法是使用 CSSpointer-events属性。使用媒体查询来定位可能无法拨打电话的设备，并为它们设置pointer-events属性为none. 这样，点击链接不会有任何效果。

您的代码可能如下所示：

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

有关详细信息，请参阅pointer-events属性文档。

于 2013-08-06T11:42:39.650 回答
1

使用移动检测脚本，例如此处接受的答案中的脚本：Detecting a mobile browser

然后

var mobile = mobilecheck();
if (!mobile) {
  document.getElementById('telephone-link').href = '#';
}
于 2013-08-01T23:12:09.663 回答