javascript - 在移动和非移动浏览器中使用

Question

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

只有一件事我还没有弄清楚:如何通过点击图片来触发电话调用。

如果我给出 <a href="tel:xxx-xxx"> , 它会工作，但如果从非移动浏览器中单击它，将显示“找不到页面”，因为电话号码自然不是现有页面。

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

我设置了一个带有按钮的 fiddle 来显示:http://jsfiddle.net/rp8ma5oe/