How can I make an <a href> only active on mobile devices?

This might not directly answer the question, but I'd challenge your assumption that you need to hide call links on other devices.

Why?

• Non-phone devices can still make calls. For example, a PC with a VoIP client can handle tel: links.
• Tablets (iPad and Android) handle tel: links by allowing the user to add the number to their contacts, which would undoubtedly be synced to their phone – a nice convenience for your users.
• Relying on automatic format detection is a hack.

So just leave it as a regular link. Maybe make it obvious by linking the phone number, so that someone on a desktop with no telephony software will understand that nothing will happen when they click it.

Call Us Now at <a href="tel:12345555555">(234) 555-5555</a>

Also, remember that a tel: link won't result in a 404 error since a HTTP request is never generated. On my machine with no tel: handler, Chrome simply does nothing, IE9 says "Some content or files on this webpage require a program that you don't have installed." (reasonable), and Firefox says "Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program." (also reasonable).

When I was faced with this problem, I decided that the benefits of just leaving in tel: links outweighed any downsides or messy alternatives.

I am using the below CSS with Media Queries to reach this.

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        cursor:default;
    }
}

It is based on this question

Don't use a hyperlink. Use microdata. Mobile phones will recognize that it is a phone number and allow it to be clicked but it won't affect normal web browsers.

<div class="vcard">
    <div class="tel">
        12345555555
    </div>
</div>