Mobile browser click-to-call format detection on most phones isn't what it could be
Plenty of numbers get selected, including addresses, ISBN numbers, and a variety of different types of numeric data that aren't phone numbers. Further, many well formed phone numbers are never detected, or aren't detected reliably.
Form detection woe
The problem has led to the use of the metatag below, which disables format detection on most WebKit based phones. This prevents false-positives in format detection, but also means implicit click-to-call support is disabled.
<meta name="format-detection" content="telephone=no">
The most reliable solution for click-to-call is to wrap the number in an A tag with tel: scheme as per RFC 3966. If you have CSS styled telephone numbers in your mobile site, an easy way to make them into a tel: style tag is with a bit of javascript. I've provided a snippet below to do just that. Given a CSS query selector (the selector must wrap the telephone number, and ONLY the telephone number), it will create an anchor tag with the tel: scheme as the href for the phone number, adding in a prefix you specify. (For example, if the number embedded in your site is 310-222-2222, you might want to prefix it with +1 for international callers.)
(function(){
function $(selector) {
if (document.querySelector)
return document.querySelectorAll(selector);
// we could fall back better using something like sizzle
return [];
}
function telefy(selector, prefix) {
prefix = prefix || '';
var aEls = $(selector);
for (var i=0,ii=aEls.length;i<ii;i++) {
var nEl = aEls[i];
var nText = nEl.firstChild;
if (nText.nodeType != 3) continue;
var sPhone = nText.nodeValue;
// create the new element
var nA = document.createElement('a');
nA.innerHTML = sPhone;
nA.href = 'tel:' + prefix + sPhone;
// replace the old element
nEl.replaceChild(nA, nText);
}
}
window._telefy = telefy;
})();
Now we make it go! Let's say our phone numbers are wrapped in a tag such as:
<span class="phone">310-222-2222</span>
We could call the telefy code above like so, to wrap it in a manner supported by most handsets:
_telefy('span.phone', '+1-');
