在移动和非移动浏览器中使用<a href="tel:...">的问题解答

Question

我需要为移动设备构建一个网页。

有一件事情我还没有想清楚：如何通过单击图像来触发电话呼叫。

如果我提供 <a href="tel:xxx-xxx">，它会起作用，但是如果从非移动浏览器中点击它，就会显示“页面未找到”，因为电话号码显然不是现有的页面。

- Ras4U

---

我一直在想同样的问题，不仅是关于图片，还有href="tel"属性。当然可以使用PHP或JS进行一些例外处理，检查浏览器和/或设备，并根据正在浏览网站的设备或浏览器更改href。 - Pepelius

有人能用例如HTACCESS进行调查吗？您能够创建一个基本为空白的.html或.php文件，将其命名为031442512.php，并在非移动浏览器上使用HTACCESS将其重定向回到之前的页面，在移动设备上作为普通链接服务，启动该号码的呼叫吗？ - Pepelius

可能是根据移动设备更改链接的重复问题。 - Alex Kulinkovich

我认为问题标题有误导性。如果我理解正确，触发调用只是起作用的。你只是想阻止非电话客户端产生错误。你能选择一个更好的标题吗？ - Felix Frank

另请参见：https://dev59.com/U3LYa4cB1Zd3GeqPaay0 和 https://dev59.com/33RC5IYBdhLWcg3wROpQ#10935842 - Martin Tournoij

Answer 1

您可以尝试以下方法：

您可以这样尝试：

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

让jQuery为你完成其余的工作：

if( isMobile.any() ){
    $('a').attr('href', 'tel:[phone]');
}

提示：

为了指定需要受影响的 <a>，请给它一个id，并按照以下方式进行：

 if (isMobile.any()) {
    $('a#phonea').attr('href', 'tel: [phone]');
 }

我像这样使用它，在非移动设备上禁用完整链接：（在我的情况下，id phone是一个<li>元素）

else {
    $('#phone').html('<i class="fa fa-phone"></i> Phone: [phone]');
}

我已经设置了一个小型Fiddle来展示一个按钮： http://jsfiddle.net/rp8ma5oe/。

- baao

---

你为什么不使用 isMobile.any 呢？ - h2ooooooo

Answer 2

您在哪个浏览器上测试过？我已经尝试了Firefox，Chrome和IE，它们都会问我应该使用哪个软件来处理“tel”链接，没有一个给我错误页面。

因此，基于这个事实，我决定在移动和桌面浏览器中都放置电话链接。有些用户可能会使用手机软件，因此在桌面浏览器中点击拨打电话也是不错的选择。

（这个答案应该是评论，但我的声望还不够）

- El Devoper

---

就像你说的那样，这应该是一条注释。我认为你现在应该有足够的声望来把它变成一条注释了。 - Pokechu22

@Pokechu22 是的，我可以，但在删除此回答后，我的声望又太低了，无法发表下一个评论。这陷入了一种厄运循环。 - El Devoper

Answer 3

它正在工作，在我的情况下，问题可能在缓存中。

- Mels

---

欢迎来到 Stack Overflow！很抱歉，您的帖子并非问题的答案，而更像是评论（当您有足够的 SO 得分添加评论时）。与此同时，您应该考虑删除此帖子，并访问“回答”部分的 SO 帮助中心，特别是这篇文章>>> stackoverflow.com/help/how-to-answer。 - inputforcolor

Answer 4

很简单： 将您的链接放置在下面：

<a href="tel:[phone]">something or your number</a>

- Saiful Islam

---

这正是Ras4U的问题中所解释的不能正常工作的情况...如果你没有用移动设备查看它或者在手持设备上使用了一些非移动浏览器，这将导致页面不存在... - Pepelius