Using in both mobile & non-mobile browsers

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.

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, Nov 07 '14 at 07: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, Nov 07 '14 at 08:14
possible duplicate of [Changing links based on mobile device](http://stackoverflow.com/questions/16724862/changing-links-based-on-mobile-device) — Alex Kulinkovich, Nov 07 '14 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, Nov 07 '14 at 12:22
Also see: http://stackoverflow.com/questions/16810356/check-if-a-href-tel5555555-is-supported and http://stackoverflow.com/questions/358397/javascript-to-detect-skype/10935842#10935842 — Martin Tournoij, Nov 07 '14 at 13:04

baao · Accepted Answer · 2014-11-07T14:05:41.120

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/

Any reason you don't use `isMobile.any`? – h2ooooooo Nov 07 '14 at 13:25 — h2ooooooo, Nov 07 '14 at 13:25

score 4 · Answer 2 · answered Nov 07 '14 at 14:25

4

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)

answered Nov 07 '14 at 14:25

El Devoper

1,073
8
20

As you said, it should be a comment. I think you should have enough rep to make it a comment now, though. – Pokechu22 Nov 14 '14 at 01:34
@Pokechu22 Yes I could and after I've deleted this answer my reputation is again too low for the next comment. That got something of a doom loop. – El Devoper Nov 17 '14 at 13:52

score 0 · Answer 3 · answered Jan 09 '22 at 16:25

0

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

answered Jan 09 '22 at 16:25

Mels

1

1

Welcome to Stack Overflow _ Unfortunately your post is not an answer to the question and more like a comment (when you have enough of a SO score to add comments). In the meantime you should consider deleting this post and visit SO Help Center section on 'Answering' and specifically this article >>> stackoverflow.com/help/how-to-answer – inputforcolor Jan 09 '22 at 17:01

score -2 · Answer 4 · answered Nov 07 '14 at 08:05

-2

its simple: place your link like bellow:

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

answered Nov 07 '14 at 08:05

Saiful Islam

332
6
15

4

This is exactly what was explained not to work in Ras4U's question... If you're not viewing it with a mobile device or have some non-mobile browser in your handheld device, this will lead to unexisting page... – Pepelius Nov 07 '14 at 08:09

Using in both mobile & non-mobile browsers

4 Answers4