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

javascript html css mobile contacts
Dom picture Dom · Nov 16, 2012 · Viewed 13.1k times · Source

I want to add this code to make the contact details on my website automatically jump into a mobile dialpad/address book when clicked:

<a href="tel:12345555555">Call Us Now</a>

How can I make it appear as plain text for non-telephone devices (computers, tablets, laptops) so that it doesn't return a 404 error and cannot be clicked?

Happy to use any combination of HTML/CSS/JS to achieve this.

Answer

John Conde picture John Conde · Nov 16, 2012

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>

Related questions

:touch CSS pseudo-class or something similar?

I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if …

Read More
Where to begin with Smartphone Web Development?

Ha all, So I've been taksed with developing a smartphone website for our property portal and first thing I did was see what lessons others had to tell online but I've found very little. I'm not building an app, I'm …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More