Telephone number links

Hi all, have googled it, but can’t seem to find an answer. When you input a telephone number on your website, so that someone viewing on a mobile phone can just tap it to call the number, is there any way of making that to happen only if they’re viewing on a phone? So that it’s not underlined or clickable if they view, for example, on a desktop. The helps appreciated. Dez

That’s interesting as I was thinking about that yesterday. I did not know you could click on the link and the phone would ring the number so could not see the point of it!

I think Javascript based on the width of the screen would work

I believe that iPhones will automatically make telephone numbers dial-able if they are in the correct format.

I think the first question is: how do you define what is and what is not mobile?
Is width enough, or do you want to get into browser sniffing? :grimacing:

If you are happy going be width, a media query can do it.

HTML

<a class="moblink" href="tel:123456789" title="Call Me">123456789</a>

CSS

            @media screen and (min-width: 500px) { /* W/E width you call "Mobile" */
                .moblink {
                    color: inherit;
                    text-decoration: none;
                    pointer-events: none;
                }
            }

If you want to get into browser sniffing, there may be a JS method, but I recall seeing a Wordpress function (PHP) that detects mobile called wp_is_mobile which looks like this :grimacing:

function wp_is_mobile() {
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
 
    return $is_mobile;
}

Which could be borrowed. Though when I saw it I got the strange urge to re-invent it in a less ugly, verbose, WPish form:-

    function is_mobile() {
        $is_mobile = false;
        $mobies = array('Mobile', 'Android', 'Silk/', 'Kindle', 'BlackBerry', 'Opera Mini', 'Opera Mobi'); // Add any you want
        foreach($mobies as $mobi) { if(strpos($_SERVER['HTTP_USER_AGENT'], $mobi)) { $is_mobile = true ; } }
        return $is_mobile ;
    }

…even though I had no intention of using it. :thinking:

Another question that comes to mind: what’s wrong with having the link on desktop?
It could be used on desktop (or tablet) if the device has Skype or similar such software installed.

3 Likes

How much faith do you have in user behavior?
Most smart phones automatically allow you to click and call on phone-links. Users may know this or instinctively try tapping or tapping anything next to a phone icon. So the simplest solution might be to style the phone-link to NEVER have an underline :slight_smile:

Thanks all, good points as always here. :+1:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.