CODEWITHSUNDEEP
htmlcss
Duane Da'Vein
Duane Da'Vein

Reputation: 21

Is there an elegant way to make phone numbers clickable on reactive websites?

I use some CSS that detects the view port size and displays a phone number as a clickable link if the user is on a phone. It seems clunky to me although it works well.

The CSS:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #show-on-mobile { display: block; }  /* show it on small screens */
  #hide-on-mobile { display: none; } 
}

@media screen and (min-width: 401px) and (max-width: 2024px) {
  #show-on-mobile  { display: none; }   /* hide it elsewhere */
  #hide-on-mobile  { display: block; }

}

The HTML

<div id="show-on-mobile">
    <a href="tel:+14109842714">+1 000-000-0000</a>
</div>
<div x-ms-format-detection="none" id="hide-on-mobile">
    +1 000-000-0000
</div>

Is there a better, more streamlined solution?

Upvotes: 2

Views: 1468

Answers (1)

jla
jla

Reputation: 4761

If you don't mind using a bit of javascript, you could leave the phone number within the <a> tags, and remove the href component if the window width is greater than 400px.

HTML:

<a href="tel:+14109842714">+1 000-000-0000</a>

JavaScript:

window.onload = function(){
    if ( window.innerWidth > 400 ) {
        document.querySelector('[href="tel:+14109842714"]').href = '';
    }
};

CSSTricks hs a great little article on this: https://css-tricks.com/how-to-disable-links/

Upvotes: 1

Related Questions