Quick explanation: Browser which processes <a/> tag with href attribute starting with "tel:" prefix will try to place a call to a defined phone number.
On modern mobile phones it just works nicely. But when you will try to open the same link on desktop browser, most likely, you will see the error page, saying something like: "Can't handle tel schema...".
Not very nice, isn't it? We don't want to show this error page on desktop browser (or any other browser which doesn't support 'tel' scheme).
So far, I found two solutions for this problem:
<a href="tel:123456" target="click-to-call-safety-net">
Call us: 123456
I have tested this approach on all available to me Android and iOS devices and can confirm that it works. The situation on desktop browsers is not that good. Chrome, Firefox, Safari are OK. IE doesn't handle loading of 'tel' schema into iframe nicely. Still shows the error page :(
- Detect 'tel' input type support. Modernizr is a good way to go.