How to disable link to phone number when on Desktop?

Question

How can I add a phone number to a website that is clickable but hides the link when I\'m browsing on a website that doesn\'t support touch.

I could use Modernizr to set

Answer 1

One way of handling this is to create two separate divs and use display:hidden.

Example:

<div class="mobile-desktop"><p>123-456-7890</p></div>
<div class="mobile-mobile"><a href="tel:123-456-7890">123-456-7890</a></div>

In your css set your mobile break points. This part is really up to you. Let's say

@media only screen (min-width: 768px){

.mobile-mobile {
display:none;
}

}

@media only screen (max-width: 767px){

.mobile-desktop{
display:none;
}

}

This should let you hide one div based on screen size. Granted 789 is just a number I picked, so pick a size you believe is mobile. You can find them online at like this site I found on Google or others like it. Lastly, this is just a quick css markup, you might have to tinker but the idea is there.

Answer 2

Thanks to TattyFromMelbourne's post I am now using a pretty simple bit:

My button id="call" will make the phone call based on his "probablyphone" test function but also will scroll down to the contact info section either way giving the button a working use no matter what.

I aslo replaced the alert with an empty function, to remove the pop-up.

<a id="call" href="#contact">PHONE US</a>


$("#call").on('click', function() {
    var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
    var link = "callto:15555555555";
        if ( !probablyPhone ) {
            window.alert = function() {};}              
    else{window.location.href = link;}
});
    </script>