If you want to add a phone number in your responsive website so that viewers can easily tap on that number and make a call from their smartphone then use the following HTML code, it’s pretty simple and almost everyone knows it
<a href="tel:123-123-4567">123-123-4567</a>
This code works well on all smartphone browser except iPhone Safari, it has some design issue. On the iPhone safari browser, you will notice the phone number will display as default blue colored link with an underline (seems like a link without any CSS code).
To fix this, use the following CSS code in your style.css file
a[href^=tel] {
text-decoration:inherit;
color: inherit;
}
Also if iPhone safari found any numeric character in your webpage it usually assumes the character as phone number and tapping on that number a popup will appear to make phone call, see the following two examples within <p> tag
<p>A phone number: <a href=”tel:123-123-4567″>123-123-4567</a></p>
<p>Not a phone number: 123-123-4567</p>
Call popup will appear both numbers being tapped. That’s a problem.
To overcome this issue you can use the following meta tag in <head> section of the HTML and the call popup will appear only for the correct number
<meta name = "format-detection" content = "telephone=no">
Thanks and hope you will find my tips helpful 🙂