Make a telephone number clickable on mobile browsers only

Question

I'm making a website for a client and have been asked to make a telephone number on the site clickable when using a mobile browser so that customers can use it to call his company easily. I've done a bit of research into the html "tel:" tag, but I'm assuming this would make the numbers clickable on all browsers instead of only just on mobiles.

So what I'm wondering is what is the best way to make phone numbers clickable when using a browser on a mobile phone, but prevent them from being clickable elsewhere?

Answer 1

See this: http://detectmobilebrowsers.com/

OR

You can verify the screen dimensions:

if ($(window).width() < 480 || $(window).height() < 480) {
//small screen, load other JS files
$.getScript('/js/script.js', function () {
    //the script has been added to the DOM, you can now use it's code
});
}

For more information about $.getScript(): http://api.jquery.com/jquery.getscript

Answer 2

screen dimensions are always changing. see my solution to similar question here. manipulate the tag:

how-to-disable-link-to-phone-number-when-on-desktop