javascript - Using <a href="tel:..."> in both mobile & non-mobile browsers - Stack Overf

admin 管理员组

文章数量: 1086019

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.

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.

• javascript
• jquery
• html
• image
• mobile

Share Improve this question Follow edited Mar 16, 2017 at 15:31 baao 73.4k1818 gold badges150150 silver badges207207 bronze badges asked Nov 7, 2014 at 7:49 Ras4URas4U 49222 gold badges1212 silver badges3030 bronze badges 5

• I've been wondering the same, not only with images but that href="tel" attribute in general. Some exceptions can surely be made with PHP or JS that check the browser and/or device and change the href according to what device or browser is exploring the site. – Pepelius Commented Nov 7, 2014 at 7:57
• Could somebody investigate this with for e.g. HTACCESS? Can you make a .html or .php file that is basically empty, naming it something like 031442512.php which will on non-mobile browsers be redirected with HTACCESS back to the page where you were, and in mobile devices will serve as a normal link, starting the call for that number? – Pepelius Commented Nov 7, 2014 at 8:14
• 1 possible duplicate of Changing links based on mobile device – Alex Kulinkovich Commented Nov 7, 2014 at 11:32
• I think the question title is misleading. Triggering the call Just Works, if I understand correctly. You just want to stop non-phone clients from producing errors. Can you choose a better title? – Felix Frank Commented Nov 7, 2014 at 12:22
• Also see: stackoverflow./questions/16810356/… and stackoverflow./questions/358397/javascript-to-detect-skype/… – Martin Tournoij Commented Nov 7, 2014 at 13:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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 plete 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/rp8ma5oe/

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 ment, but my reputation is to low)

it is working, in my case, the problem was probably in caches

its simple: place your link like bellow:

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

本文标签： javascriptUsing lta hrefquottelquotgt in both mobile amp nonmobile browsersStack Overflow