使用<a href="tel:..."> in both mobile &amp; non-mobile browsers</a>

Question

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

我还有一件事我还没弄明白：如何通过点击图片来触发电话。

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

Answer 1

在浏览器中你测试过吗？我已经在Firefox，Chrome和IE中尝试过了，所有人都问我应该使用哪些软件用于“tel”链接，他们都没有给我一个错误页面。

由于这个事实，我决定让我上次制作的网站在移动和桌面浏览器中使用电话链接。有些用户可能会使用手机软件，因此点击通话也可以用于桌面浏览器。

（这个答案应该是评论，但我的声誉很低）

Answer 2

你可以这样试试：

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:1323456458897');
}

<强>旁注：

要指定哪个<a>应该受到影响，请为您的<a>提供ID，并按照以下方式执行操作：

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

我这样使用它来禁用不在移动设备上的完整链接:( id phone在我的情况下是<li>元素

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

我设置了一个小小的按钮来显示：http://jsfiddle.net/rp8ma5oe/

Answer 3

简单： 把你的链接放在下面：

<a href="tel:12345565444">something or your number</a>