Using <a href= "https://stackoverflow.com/tel:..." rel="nofollow noreferrer"> in mobile and non-mobile browsers

Question

I need to create a webpage for a mobile device.

There is only one thing that I still do not understand: how can I make a phone call by clicking on the image.

If I give <a href="tel:xxx-xxx">, it will work, but if it is clicked on non-mobile browsers, "Page not found" will appear, since the phone number, of course, is not an existing page.

Answer 1

You can try this as follows:

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

Sidenote:

, <a> , <a> id :

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

, , : (id phone a <li> element

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

, : http://jsfiddle.net/rp8ma5oe/

Answer 2

? Firefox, Chrome IE, , "tel", .

- , - . , .

( , )

Answer 3

its simple: put your link as below:

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