<a href="tel:...">在移动和非移动浏览器中使用</a>

Question

I need to build a web page for mobile device.

There's only one thing I still haven't figured out: how can I trigger a phone call through the click of an image.

If I give a <a href="tel:xxx-xxx"> , it will work, but if it is clicked from non-mobile browsers, "Page not found" will show up, as the telephone number naturally isn't an existing page.

Answer 1

In wich Browser did you test that? I've tried it in Firefox, Chrome and IE and all of them ask me wich software they should use for "tel" links, none of them gave me an error Page.

Because of that fact I decided for my last made website to have the tel links in mobile and desktop browser. Some users may use a phone software, so a call by click can be good for desktop browsers too.

(This answer should be a comment, but my reputation is to low)

Answer 2

You can try it like this:

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());
    }
};

and let jQuery do the rest for you:

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

SIDENOTE:

To specify which <a> should be affected, give your <a> an id and do it like this:

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

I use it like this, to disable the complete link when not on mobile: (id phone is in my case a <li> element

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

I've setup a little fiddle with a button to show: http://jsfiddle.net/rp8ma5oe/

Answer 3

它正在工作，就我而言，问题可能出在缓存中

Answer 4

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

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